antd-table-virtualized

antd-table-virtualized

React table components compatible with some antd table API

:warning: This version is not stable yet, please do not use it in production environment

Install

# Yarn
yarn add antd-table-virtualized

# NPM
npm install --save antd-table-virtualized

Usage

import AntdTableVirtualized from 'antd-table-virtualized'

// Note: in order to autosize the table, you need to set the
//       wrapper element's style property `display` to `flex`.
//       Otherwise the view will be blank.

<div style={{ dispaly: 'flex' }}>
  <AntdTableVirtualized
    {/* props here */}
  />
  <div>
    {/* other code here */}
  </div>
</div>

Please refer to src/App.js for usage, feel free to contact me lingirlsea@gmail.com :heart:

API

AntdTableVirtualized

Property	Description	Type	Default	Version
bordered	Whether to show all table borders	boolean	false
striped	Whether Table is striped	boolean	false
clickHighlight	Weather highlight the row after you clicked, support for custom color values	boolean | string	false
rowHeight	Height for content row	number	40
rowHeadHeight	Height for head row	number	40
multipleSort	Multi-header sort, used with column sort	boolean	false
placeholder	To customize innerHTML when no data	ReactNode	No Data
className	Table's className	string	-
columns	Columns of table	array	-
dataSource	Data record array to be displayed	array	-
pagination	Config of pagination. You can ref table pagination config or full pagination document, hide it by setting it to false	object	-
rowSelection	Row selection config	object	null
onRow	Set props on per row, document	Function(record, index)	-

pagination also support properties below

Property	Description	Type	Default	Version
height	Pagination height	number	50
wrapperStyle	Wrapper element style for pagination	object	-

rowSelection

Properties for row selection.

Property	Description	Type	Default	Version
columnWidth	Set the width of the selection column	number	48
getCheckboxProps	Get Checkbox props	Function(record)	-
selectedRowKeys	Controlled selected row keys	number[]	[]
onChange	Callback executed when selected rows change	Function(selectedRowKeys, selectedRows)
onSelect	Callback executed when select/deselect one row	Function(selectedRowKeys, selectedRows)	-
onSelectAll	Callback executed when select/deselect all rows	Function(selected, selectedRows, changeRows)	-

Column

One of the Table columns prop for describing the table's columns, Column has the same API.

Property	Description	Type	Default	Version
ellipsis	Ellipsize cell content	boolean	false
toolTip	A simple text popup tip, Used with ellipsis, document	boolean|object	false
width	Width of this column	number	-
fixed	Set column to be fixed: true(same as left) 'left' 'right'	boolean	string	-
sort	Column sort, see example below	object	-
render	Renderer of the table cell. The return value should be a ReactNode	Function(text, record, index) {}	-

sort: {
  // 'ascend' | 'descend'
  defaultOrder: 'ascend',
  handle: (sortFields) => {
    console.log(sortFields)
  }
}

Related libraries

• antd: An enterprise-class UI design language and React UI library.
• react-window: React components for efficiently rendering large lists and tabular data.
• react-virtualized-auto-sizer: HOC that grows to fit all of the available space and passes the width and height values to its child.

License

MIT