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