React table components compatible with some antd table API

Usage no npm install needed!

<script type="module">
  import antdTableVirtualized from '';


NPM registryNPM license


React table components compatible with some antd table API

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


# Yarn
yarn add antd-table-virtualized

npm install --save antd-table-virtualized


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' }}>
    {/* props here */}
    {/* other code here */}

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



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 -


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) -


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) => {

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.