JS Table Cell Selector

JS library allows you to select cells of HTML tables as well as cleaning, copying, cutting and pasting data of table.

Supported copy/cut/paste to spreadsheets such as Microsoft Excel, Google Docs, LibreOffice and OpenOffice.

Demo

See demo.

Setup

Classic web with <script> tag

Include the js-files which you can find in the dist folder.

<script src="dist/tcs.bundle.min.js"></script>

ES6

Install module using npm:

npm install js-table-cell-selector

or using yarn:

yarn add js-table-cell-selector

and import:

import TableCellSelector from "js-table-cell-selector";

Usage example

var table = document.getElementById("tcs-table");
var options = {deselectOutTableClick: false, enableChanging: true};
var buffer = new TableCellSelector.Buffer();
var tcs = new TableCellSelector(table, options, buffer);
tcs.onStartSelect = function (event, cell) {
    console.log("start select");
};
tcs.enableHotkeys = true;

Keyboard shortcuts

• Ctrl + A — select all
• Ctrl + C — copy
• Ctrl + V — paste
• Ctrl + X — cut
• Ctrl + (Backspace or Delete) — clear

Note: operations for the browser buffer only work when TableCellSelector.Buffer is initialized.

Options

| Name | Type | Default | Description | |-------------------------|------------------|---------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------| | deselectOutTableClick | Bool | true | Deselect when clicking is outside the table | | enableChanging | Bool | false | The flag allows changing the table using key combinations | | enableHotkeys | Bool | true | The flag of hotkeys enable | | getCellFn | Function | function (cell, coord) { return cell.innerText; } | Getting cell value | | ignoreClass | String | 'tcs-ignore' | You can add this class to a TR or TD | | ignoreTfoot | Bool | false | Ignore tag TFOOT and its contents | | ignoreThead | Bool | false | Ignore tag THEAD and its contents | | mergePastingGlue | String | ' ' | The gluing string when pasted into merged cells | | mouseBlockSelection | Bool | true | Must be disabled when editing cell contents when contenteditable is true for selection to work | | selectClass | String | 'tcs-select' | Class added to the cell when selecting | | selectIgnoreClass | Bool | true | Select ignored cells. The actions of changing them will not work anyway | | setCellFn | Function | function (cell, data, coord) { cell.innerText = data; } | Setting cell value | | tableClass | String | 'tcs' | Class added to the table when initializing |

Methods:

The readout of positions is from the upper left corner of the table as [y, x]

constructor (table [, options [, buffer]])

clear ([c1 [, c2]])

Clear selected cell

@param c1 - starting position [0, 0]
@param c2 - end position [1, 1]
@returns {boolean}

copy ([c1 [, c2]])

Copy with browser buffer support

@param c1 - starting position [0, 0]
@param c2 - end position [1, 1]
@returns {array[][] | false}

cut ([c1 [, c2]])

Cut with browser buffer support

@param c1 - starting position [0, 0]
@param c2 - end position [1, 1]
@returns {array[][] | false}

deselect ()

Remove selection

@returns {number}

getCoords ()

Get selection coordinates

@returns {array[][] | false}

initSizeMatrix ()

initialize or re-initialize the size matrix

paste (data [, c1 [, c2]])

@param data - array[][]
@param c1 - starting position [0, 0]
@param c2 - end position [1, 1]

select (c1 [, c2])

@param c1 - starting position [0, 0]
@param c2 - end position [1, 1]
@returns {boolean}

selectAll()

Select all cells

@returns {number}

destroy ()

Events:

onStartSelect(event, cell)

Occurs at the starting of a selection

onSelect(prevState, cell, coord)

Occurs when a new cell is selected, starting from the second cell (triggered on each cell in the selection). The first is triggered onStartSelect

prevState - flag that is true if the cell has already been selected otherwise false

onDeselect(event, cell)

Occurs when deselecting a cell

onFinishSelect(event)

Occurs at the finishing of a selection

License

Apache 2.0