# table-data-selector

> Select necessary rows / cols, copy, paste to excel

Latest version **1.8.0** (published 2023-09-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install table-data-selector
pnpm add table-data-selector
yarn add table-data-selector
bun add table-data-selector
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.8.0 |
| Published | 2023-09-01 |
| First published | 2022-10-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sujan Sapkota |
| Maintainers | code.sujan |
| Keywords | table-selector, table-copy, table-to-excel, excel table, excel like table |

## Links

- npm: https://www.npmjs.com/package/table-data-selector
- Repository: https://github.com/code-sujan/advance-form-table
- Homepage: https://github.com/code-sujan/advance-form-table#readme
- Issues: https://github.com/code-sujan/advance-form-table/issues
- npm.io page: https://npm.io/package/table-data-selector

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.8.0 (latest) — 2023-09-01
- 1.7.0 — 2023-09-01
- 1.6.0 — 2023-08-30
- 1.5.0 — 2023-08-30
- 1.4.0 — 2023-08-30
- 1.2.2 — 2023-01-22
- 1.3.0 — 2022-11-15
- 1.2.1 — 2022-11-14
- 1.1.1 — 2022-11-14
- 1.2.0 — 2022-11-13
- 1.1.0 — 2022-11-03
- 1.0.1 — 2022-10-25
- 1.0.0 — 2022-10-25

## README

# Table Data Selector
> `Table Data Selector` is a library that helps to select data, copy or delete from table / form on table.

> Copied data can be directly pasted to excel.
It also provides selected cells and selected values which can be used as needed.

Demo : https://advance-form-table.netlify.app

## Installation

> npm
   ```npm
   npm i "table-data-selector"
   ```
> Yarn
   ```yarn
   yarn add "table-data-selector"
   ```

## Usages
>Use `CTRL + Left mouse click` to begin selection, Hover with` CTRL + Left mouse click` to continue selection.

> Keyboard navigation `Shift + Arrow key` can be done once selection has started.

> Use `CTRL + SHIFT` to scroll all the way

```html
<link rel="stylesheet" href="table-data-selector/table-selector.css"/>
```

```js
import useTableSelector from "table-data-selector/table-selector.js";

window.addEventListener("DOMContentLoaded", (ev) => {
    const tableSelector = useTableSelector(config);
})

```

### Config Options
```js
{
    selectedClass : null,   // class applied on selected cell
    useOnClass: [],        // not applied yet
    skipClass: [],         // not applied yet
    handleCopy: false,     // handle copy event when set true
    handleDelete: false,    // handle delete keypress when set true,
    textRetriver: (elem) => elem.textContent,
    scrollableElemRetriever: () => window, //method returning scrollable element
    summaryClass : 'table-selector-summary-display'
}

```

### Summary Info
- Emits summary info with event `selected-summary` on change of selected cells
- Use `summaryClass` in your view to display summary info. It allows continue selection of table cells while copying summary value.
```js
{
    tableId: tableId,
        sum: 0,
        average: 0,
        count: 0,
        hasValue: false
}
````

### Exposed Methods
```js

/*
* @param {string} tableId
* @returns {Array}
*/
getSelectedCells(tableId);

/*
* @param {string} tableId
* @param { type: Function, default : (elem) => elem.textContent} textRetriever
* @returns {string}
*/
getSelectedValues(tableId, textRetriever = null);

```

---
_Source: https://npm.io/package/table-data-selector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._