0.8.0 • Published 4 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-table
Getting 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 |