0.8.0 • Published 5 years ago
@airglow/prefab-table v0.8.0
Prefab-Table
A custom Prefab to help UI applications maintain table component states.
Installation
npm install --save @airglow/prefab @airglow/prefab-tableGetting Started
To add the Table Prefab, you simply need to import the prefab somewhere in your code:
import '@airglow/prefab-table';Usage
import prefabFactory from '@airglow/prefab';
export default prefabFactory({
table: {
type: 'table',
dataSelector: state => [state.todos],
columns: {
text: {
sorter: 'default'
},
assignee: {
sorter: myCustomNameSorter
}
}
}
});In the above example, the table has two columns: text and assignee. Text column is sorted with default alphabatic order. Assignee is sorted with myCustomNameSorter, which is a custom sorter implemented somewhere else from the UI application.
Selectors
The table provides the following selectors:
| Selector | Input | Description |
|---|---|---|
| state | state | returns the full state of the table, columns, sort direction, and selected rows (see below) |
| handlers | dispatch | returns all the handlers for the rows and columns (see below) |
| addColumnAction | columnName, column configuration | adds a new column for the table to use for sorting |
| deselectRowsAction | null | rowData | rowData | Toggles the selection of a row in the table. If no input is provided then all the selected rows will be cleared |
| removeColumnAction | columnName, column configuration | removes added columns only |
| toggleRowAction | rowData | Toggles the selection or a row in the table |
| selectedData | state | returns the selected rows data |
Table State
| Key | Description |
|---|---|
| columns | an object containing the visible column prefabs, including any added |
| data | The array of data that populates the rows in the table |
| hiddenColumns | an object containing hidden column prefabs |
| selectedData | an array of data that is contained in the selected rows |
| selectedRows | an array of indices that represent the selected rows according to the current sort direction |
| sortBy | the name of the column being used to sort the table |
| sortDirection | a number representing whether the sort is ascending or descending |
Table Handlers
| Key | Description |
|---|---|
| hideColumn | hides a column |
| onHeaderClick | callback for when a column header is clicked |
| onRowClick | callback for when a row is clicked |
| showColumn | unhides a column |