react-table-hoc-select-cell

0.8.0 • Public • Published

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} - default false - define if differents columns can be selected. You can choose to enable only some columns with an array. In the next example, name and firstname column can be selected together, and personalEmail with workEmail. But name column cannot be selected with personalEmail:

    • Array
    config = {
      enableMultipleColsSelect: [['name', 'firsname'], ['personalEmail', 'workEmail']]
    }
    • Function
    config = {
      enableMultipleColsSelect: (cellFrom, cellTo) => {
        return cellFrom.column.id === cellTo.column.id;
      }
    }

Render

Select data are inject as second parameter of Cell

render () {
  return (
    <ReactTableSelectCell
      columns={[
        {
          Cell: (row, { selected, getSelectedCells, onSelect, unselectAllCells }) => {
            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. Use getSelectedCells instead. It's deprecated because it can create issue if you use cell as PureComponent, all cells will be rerender when selectedCells change.

  • onSelect {func} - Use to select a cell. It take event and row arguments

  • unselectAllCells {func} - unselect all selected cells.

Public methods

  • getSelectedCells
  • unselectAllCells

Dependencies (1)

Dev Dependencies (51)

Package Sidebar

Install

npm i react-table-hoc-select-cell

Weekly Downloads

11

Version

0.8.0

License

MIT

Unpacked Size

173 kB

Total Files

12

Last publish

Collaborators

  • guillaumejasmin