react-common-table

React common table component.

install

Development

npm install
npm run start

Examples

https://kylqin.github.io/react-common-table

Usage

Try it on codesandbox.io

API

Properties

headers

type: array default: required

The table headers, an item for a column. The struct of the column object is:

{
  // [requred] column key
  colName: string
  // [requred] column title
  name: string,
  // [optional] column width, in px
  width: number,
  // [default: 'left'] cell content horizontal align, will be ignored
  // if formatter exists
  alighH: ['left'|'rihgt'|'center'|'justify'],
  // [default: 'top'] cell content vertical align, will be ignored if
  // formatter exists
  formatter: (cell, onChange) => cellElement,
  // [optional] The values of cells of this column is calcuted by this
  // formula if it exists. the params, are the colName's of other
  // columns.
  fomula: ['param1', 'param2', ..., (param1, param2) => cellValue],
  // [optional] if exist, this column is a group and the width and
  // formmater will be ingnored. The sub is an array of columns.
  sub: array
}

rows

type: array default: []

The table rows, an item for a row. the item object has keys which are colName's, and a special key sub, and some special keys starting with _, such as _fommater, etc:

{
  // key is the colName of column defined in headers
  (key: value)...,
  // [optional] If exists, this row will branch out sub rows
  // and some cells of the row will be merged-like or have
  // a spaning-multiple-rows effect (`rowspan > 1`).
  sub: array,
  // [optional] (props, onChange) => cellElement, will
  // replace column formatter if exists.
  _formatter: function
}

pagination

type: Object default: undefined

Pagination of the table. If the property is not set, the table has no pagination.

{
  // [default: false] fetch rows synchronously or asynchronously
  sync: Bool,
  // [default: 0]
  pageIndex: number,
  // [default: 10] how many rows each page
  pageSize: number,
  // [readonly] hwo mny pages
  totalPage: number,
  // [required if sync is false] how may recoreds or total rows
  totalRecord: number,
  // [default: [10, 20, 50, 100]], array of page sizes
  sizeList: array,
  // [({ pageIndex, pageSize, }) => rows }] request rows when
  // sync is false
  requestRows: function
}

frozenLeft

type: _string default: undefined

The colName of the rightmost column of the left frozen columns.

frozenRight

type: _string default: undefined

The colName of the leftmost column of the right frozen columns.

frozenTop

type: integer default: undefined

The index of the bottommost row of the top frozen rows.

frozenBottom

type: integer default: undefined

The index of the topmost row of the bottom frozen rows.

tableHeight

type: number default: undefined

Table heigth in px. When tableHeight is set, the table header is frozen(fixed to top).

enableLineNumber

type: bool default: false

Show line number column.

enableSelectRows

type: bool default: false

Show "select rows" (checkbox) column.

showSelectedRowsCount

type: bool or function default: false

Enable to show selected rows count message. Or use the function the generated the message.

Integer => String

i18nLan

type: string default: 'en_US' i18n language. 语言, 国际化.

onCellChange

type: function default: undefined

Callback called after cells contents changed.

(Cell, UpdatePack|Value) => Promise

onHeaderChange

type: function default: undefined

Callback called after header cells contents changed.

(ColCell, UpdatePack|Value) => Promise

Methods (on ref)

rows

type: () => arrays

Get The rows array of current page.

pagination

type: () => Object

Get The pagination object.

License

react-common-table is released under the ISC license.