js-table-cell-selector v0.6.0
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
3 years ago
3 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago