react-table-hoc-select-cell v0.8.0
ReactTable HOC for selectable cells
Commands available
- CLICK
- CTLR + CLICK
- SHIFT + CLICK
Config
npm install react-table-hoc-select-cell --save
import ReactTable from 'react-table';
import createTable from 'react-table-hoc-selectable-cell';
const ReactTableSelectCell = createTable(ReactTable, config);
Config
retrievePrevOriginal
- {function} - make possible to retrieve previous selected cells even if the data was changed. It's usefull when you need to change the order of data and you want to keep selected cells.config = { retrievePrevOriginal: (prevOriginal, nextOriginal) => prevOriginal.id === nextOriginal.id }
enableMultipleColsSelect
- {bool | array | function} - defaultfalse
- define if differents columns can be selected. You can choose to enable only some columns with an array. In the next example,name
andfirstname
column can be selected together, andpersonalEmail
withworkEmail
. Butname
column cannot be selected withpersonalEmail
:Array
config = { enableMultipleColsSelect: [['name', 'firsname'], ['personalEmail', 'workEmail']] }
Function
config = { enableMultipleColsSelect: (cellFrom, cellTo) => { return cellFrom.column.id === cellTo.column.id; } }
Render
Select data are injected as second parameter of Cell
:
render () {
return (
<ReactTableSelectCell
columns={[
{
Cell: (row, { selected, onSelect }) => {
const style = { border: selected ? 'border solid 1px' : null };
return (
<div onClick={event => onSelect(event, row)} style={style}>
{row.value}
<div/>
)
},
}
]}
>
)
}
Select data
selected
{bool} -true
if cell is selected
getSelectedCells
{func} - return array of selected cells
selectedCells
- DEPRECATED {array} - array of selected cells. UsegetSelectedCells
instead. It's deprecated because it can create issue if you use cell as PureComponent, all cells will be rerender whenselectedCells
change.
onSelect
{func} - Use to select a cell. It takeevent
androw
arguments
unselectAllCells
{func} - unselect all selected cells.
Ref
You can use wrappedInstanceRef
props to get the ref of ReactTable:
render () {
return (
<ReactTableSelectCell
wrappedInstanceRef={(ref) => { this.tableRef = ref; }}
...
>
)
}
Public methods
- getSelectedCells
- unselectAllCells
- getWrappedInstance
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago