0.8.0 • Published 4 years ago

@airglow/prefab-table v0.8.0

Weekly downloads
42
License
Apache-2.0
Repository
github
Last release
4 years ago

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:

SelectorInputDescription
statestatereturns the full state of the table, columns, sort direction, and selected rows (see below)
handlersdispatchreturns all the handlers for the rows and columns (see below)
addColumnActioncolumnName, column configurationadds a new column for the table to use for sorting
deselectRowsActionnull | rowData | rowDataToggles the selection of a row in the table. If no input is provided then all the selected rows will be cleared
removeColumnActioncolumnName, column configurationremoves added columns only
toggleRowActionrowDataToggles the selection or a row in the table
selectedDatastatereturns the selected rows data

Table State

KeyDescription
columnsan object containing the visible column prefabs, including any added
dataThe array of data that populates the rows in the table
hiddenColumnsan object containing hidden column prefabs
selectedDataan array of data that is contained in the selected rows
selectedRowsan array of indices that represent the selected rows according to the current sort direction
sortBythe name of the column being used to sort the table
sortDirectiona number representing whether the sort is ascending or descending

Table Handlers

KeyDescription
hideColumnhides a column
onHeaderClickcallback for when a column header is clicked
onRowClickcallback for when a row is clicked
showColumnunhides a column
0.8.0

4 years ago

0.7.1

4 years ago

0.7.0

4 years ago

0.6.1

4 years ago

0.6.0

4 years ago

0.5.2

4 years ago

0.5.0

5 years ago