开发者社区> 镜像站> NPM> @airglow/prefab-table
@airglow/prefab-table
Prefab for Table Implementations
Last updated 2 months ago by dgrossen .
Apache-2.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @airglow/prefab-table 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.8.0                                ...           latest (2 months ago)

7 Versions

  • 0.8.0                                ...           2 months ago
  • 0.7.1                                ...           5 months ago
  • 0.7.0                                ...           7 months ago
  • 0.6.1                                ...           7 months ago
  • 0.6.0                                ...           7 months ago
  • 0.5.2                                ...           8 months ago
  • 0.5.0                                ...           a year ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 21
Dependencies (2)
Dev Dependencies (2)
Dependents (0)
None