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