table-data-selector
v1.8.0
Published
Select necessary rows / cols, copy, paste to excel
Downloads
13
Maintainers
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 i "table-data-selector"
Yarn
yarn add "table-data-selector"
Usages
Use
CTRL + Left mouse click
to begin selection, Hover withCTRL + 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
<link rel="stylesheet" href="table-data-selector/table-selector.css"/>
import useTableSelector from "table-data-selector/table-selector.js";
window.addEventListener("DOMContentLoaded", (ev) => {
const tableSelector = useTableSelector(config);
})
Config Options
{
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.
{
tableId: tableId,
sum: 0,
average: 0,
count: 0,
hasValue: false
}
Exposed Methods
/*
* @param {string} tableId
* @returns {Array}
*/
getSelectedCells(tableId);
/*
* @param {string} tableId
* @param { type: Function, default : (elem) => elem.textContent} textRetriever
* @returns {string}
*/
getSelectedValues(tableId, textRetriever = null);