Selectabular - Selection utilities
Common functionalities when dealing with table rows.
- (De)-Selecting
- Filtering
- Toggling
API
; // Or you can cherry-pick;;
select.all(rows) => [<row>]
- Returned
rows
is an array where each row has a.selected=true
attribute
select.none(rows) => [<row>]
- Returned
rows
is an array where each row has a.selected=false
attribute
select.rows(filter)(rows) => { rows: [<row>], selectedRows: [<matchingRow>]}
Given a filter, it will select the matching rows and return them:
const initRows = id: 10 selected: true product: 'apple' company: 'Apple Inc' price: 15 stock: 300 id: 11 product: 'pear' company: 'Pear Inc' price: 3 stock: 1000 id: 12 product: 'grape' company: 'Grapesoft' price: 221 stock: 18 id: 13 product: 'banana' company: 'Banana Tech' price: 12 stock: 9 ;const myfilter = rowprice > 5const rows selectedRows: result = selectabularrowsmyfilterinitRows;>> result id: 12 product: 'grape' company: 'Grapesoft' price: 221 stock: 18 id: 13 product: 'banana' company: 'Banana Tech' price: 12 stock: 9 ;>> rows id: 10 selected: true product: 'apple' company: 'Apple Inc' price: 15 stock: 300 id: 11 product: 'pear' company: 'Pear Inc' price: 3 stock: 1000 id: 12 selected: true product: 'grape' company: 'Grapesoft' price: 221 stock: 18 id: 13 selected: true product: 'banana' company: 'Banana Tech' price: 12 stock: 9 ;
Important!
rows
does not toggle the rows that do not match the filter; please useselect.none
a priori for that.- As shown in the example,
rows
, andselectedRows
are internal variable names, used in the implementation; which can be easily renamed inline (See example whereselectedRows
is renamed toresult
)
select.toggle(filter)(rows) => [<row>]
- Input rows where each filter-matching row is toggled its
selected
attribute.
const initRows = id: 10 selected: false product: 'apple' company: 'Apple Inc' price: 15 stock: 300 id: 11 selected: true product: 'pear' company: 'Pear Inc' price: 3 stock: 1000 id: 12 product: 'grape' company: 'Grapesoft' price: 221 stock: 18 id: 13 product: 'banana' company: 'Banana Tech' price: 12 stock: 9 ;const filter = rowid < 12const result = selectabularinitRows; >> result id: 10 selected: true product: 'apple' company: 'Apple Inc' price: 15 stock: 300 id: 11 selected: false product: 'pear' company: 'Pear Inc' price: 3 stock: 1000 id: 12 product: 'grape' company: 'Grapesoft' price: 221 stock: 18 id: 13 product: 'banana' company: 'Banana Tech' price: 12 stock: 9 ;
React Helpers
Selecting by Arrow Keys
There's a single React specific helper that makes it easier to track up/down arrows. The API consists of a single higher order function: select.byArrowKeys({ rows: <rows>, selectedRowIndex: <number>, onSelectRow: (selectedRowIndex) => <any>})(<React element>) => <React element>
If there is a selection (selectedRowIndex
), then it triggers onSelectRow
with the new selectedRowIndex
which you can then use to update your selection state.
How to Use?
The following example illustrates how to use the functionality with a Reactabular based table. Selection is tracked per row to comply with Reactabular's strict shouldComponentUpdate
. This allows it to tell apart the rows that have changed while maintaining good performance.
You can select a row by clicking in the following example. If there's a selection, you can move up and down using the arrow keys.
/*import React from 'react';import classnames from 'classnames';import cloneDeep from 'lodash/cloneDeep';import find from 'lodash/find';import findIndex from 'lodash/findIndex';import { compose } from 'redux';import * as Table from 'reactabular-table';import * as select from 'selectabular';*/ const rows = id: 100 name: 'Adam' age: 55 id: 102 name: 'Joe' age: 12 id: 101 name: 'Brian' age: 62 id: 103 name: 'Mike' age: 22 id: 104 name: 'Jack' age: 33 ; const columns = property: 'name' header: label: 'Name' property: 'age' header: label: 'Age' ; Component { ; thisstate = rows columns selectedRows: ; thisonRow = thisonRow; thisonSelectRow = thisonSelectRow; thisgetSelectedRowIndex = thisgetSelectedRowIndex; } { const columns rows selectedRows = thisstate; const selectedRowIndex = this; return select <div> <Table.Provider ="pure-table pure-table-striped" = > <Table.Header /> <Table.Body = ="id" = /> <tfoot> <tr> <td>Selected: selectedRows0 && selectedRows0name</td> <td></td> </tr> </tfoot> </Table.Provider> </div> ; } { return className: this ; } { const rows = thisstate; const selectedRowId = rowsselectedRowIndexid; this; } { return ; } <SelectionTable />
License
MIT. See LICENSE for details.