React-Rsuite table 2.0.1: A React table component.

icon
Latest Release: 2.0.1
  • 修复多个 bug
  • 修改 renderTreeToggle
  • 支持 bordered 属性
  • 支持 treeToggletreeToggleBy 属性
  • 支持 touch events
  • <Column> 支持 colSpan 属性, 可以合并列单元格
  • Scrollbar 支持点击滚动到指定位置
  • 更新 rsuite-theme, 解决分页按钮禁用样式问题
Source code(tar.gz)
Source code(zip)

rsuite-table

A React table component.

npm

Travis Coverage Status

Features

  • Support virtualized.
  • Support fixed header, fixed column.
  • Support custom adjustment column width.
  • Support for custom cell content.
  • Support for displaying a tree form.
  • Support for sorting.
  • Support for expandable child nodes
  • Support for RTL

Preview

  • Fixed Column

  • Custom Cell

  • Tree Table

  • Expandable

More Examples

Install

npm i rsuite-table --save

Usage

import { Table, Column, HeaderCell, Cell } from 'rsuite-table';
import 'rsuite-table/lib/less/index.less'; // or 'rsuite-table/dist/css/rsuite-table.css'

const dataList = [
  { id: 1, name: 'a', email: '[email protected]', avartar: '...' },
  { id: 2, name: 'b', email: '[email protected]', avartar: '...' },
  { id: 3, name: 'c', email: '[email protected]', avartar: '...' }
];

const ImageCell = ({ rowData, dataKey, ...rest }) => (
  <Cell {...rest}>
    <img src={rowData[dataKey]} width="50" />
  </Cell>
);

const App = () => (
  <Table data={dataList}>
    <Column width={100} sort fixed resizable>
      <HeaderCell>ID</HeaderCell>
      <Cell dataKey="id" />
    </Column>

    <Column width={100} sort resizable>
      <HeaderCell>Name</HeaderCell>
      <Cell dataKey="name" />
    </Column>

    <Column width={100} sort resizable>
      <HeaderCell>Email</HeaderCell>
      <Cell>
        {(rowData, rowIndex) => {
          return <a href={`mailto:${rowData.email}`}>{rowData.email}</a>;
        }}
      </Cell>
    </Column>

    <Column width={100} resizable>
      <HeaderCell>Avartar</HeaderCell>
      <ImageCell dataKey="avartar" />
    </Column>
  </Table>
);

API

<Table>

Property Type (Default) Description
affixHeader boolean,number Affix the table header to the specified position on the page
affixHorizontalScrollbar boolean,number Affix the table horizontal scrollbar to the specified position on the page
autoHeight boolean Automatic height
bodyRef (ref: HTMLElement) => void A ref attached to the table body element
bordered boolean Show border
cellBordered boolean Show cell border
data * object[] Table data
defaultExpandAllRows boolean Expand all nodes By default
defaultExpandedRowKeys string[] Specify the default expanded row by rowkey
defaultSortType enum: 'desc', 'asc' Sort type
expandedRowKeys string[] Specify the default expanded row by rowkey (Controlled)
headerHeight number(40) Table Header Height
height number(200) Table height
hover boolean (true) The row of the table has a mouseover effect
isTree boolean Show as Tree table
loading boolean Show loading
locale object: { emptyMessage: ('No data'), loading: ('Loading...') } Messages for empty data and loading states
minHeight number (0) Minimum height
onDataUpdated (nextData: object[], scrollTo: (coord: { x: number; y: number }) => void) => void Callback after table data update.
onExpandChange (expanded:boolean,rowData:object)=>void Tree table, the callback function in the expanded node
onRowClick (rowData:object, event: SyntheticEvent)=>void Click the callback function after the row and return to rowDate
onRowContextMenu (rowData:object, event: SyntheticEvent)=>void Invoke the callback function on contextMenu and pass the rowData
onScroll (scrollX:object, scrollY:object)=>void Callback function for scroll bar scrolling
onSortColumn (dataKey:string, sortType:string)=>void Click the callback function of the sort sequence to return the value sortColumn, sortType
renderEmpty (info: React.ReactNode) => React.ReactNode Customized data is empty display content
renderLoading (loading: React.ReactNode) => React.ReactNode Customize the display content in the data load
renderRowExpanded (rowDate?: Object) => React.ReactNode Customize what you can do to expand a zone
renderTreeToggle (icon:node,rowData:object,expanded:boolean)=> node Tree table, the callback function in the expanded node
rowClassName string , (rowData:object)=>string Add an optional extra class name to row
rowExpandedHeight number (100) Set the height of an expandable area
rowHeight number(46), (rowData: object) => number Row height
rowKey string ('key') Each row corresponds to the unique key in data
rtl boolean Right to left
shouldUpdateScroll boolean(true) Whether to update the scroll bar after data update
showHeader boolean (true) Display header
sortColumn string Sort column name ˝
sortType enum: 'desc', 'asc' Sort type (Controlled)
virtualized boolean Effectively render large tabular data
width number Table width

<Column>

Property Type (Default) Description
align enum: 'left','center','right' Alignment
colSpan number Merges column cells to merge when the dataKey value for the merged column is null or undefined.
fixed boolean, 'left', 'right' Fixed column
flexGrow number Set the column width automatically adjusts, when set flexGrow cannot set resizable and width property
minWidth number(200) When you use flexGrow, you can set a minimum width by minwidth
onResize (columnWidth?: number, dataKey?: string) => void Callback after column width change
resizable boolean Customizable Resize Column width
sortable boolean Sortable
treeCol boolean A column of a tree.
verticalAlign enum: 'top', 'middle', 'bottom' Vertical alignment
width number Column width

sortable is used to define whether the column is sortable, but depending on what key sort needs to set a dataKey in Cell. The sort here is the service-side sort, so you need to handle the logic in the ' Onsortcolumn ' callback function of <Table>, and the callback function returns sortColumn, sortType values.

<Cell>

Property Type (Default) Description
dataKey string Data binding key, but also a sort of key
rowData object Row data
rowIndex number Row number

There are three ways to use <Cell>, as follows:

  • 1.Associate the fields in the data with dataKey.
<Column width="{100}" align="center">
  <HeaderCell>Name</HeaderCell>
  <Cell dataKey="name" />
</Column>
  • 2.Customize a <Cell>.
const NameCell = ({ rowData, ...props }) => (
  <Cell {...props}>
    <a href={`mailto:${rowData.email}`}>{rowData.name}<a>
  </Cell>
);

<Column width={100} align="center">
  <HeaderCell>Name</HeaderCell>
  <NameCell />
</Column>
  • 3.Customize functions directly within the <Cell>.
<Column width={100} align="center">
  <HeaderCell>Name</HeaderCell>
  <Cell>
    {(rowData, rowIndex) => {
      return <a href={`mailto:${rowData.email}`}>{rowData.name}</a>;
    }}
  </Cell>
</Column>

Methods

  • scrollTop(top:number = 0)
  • scrollLeft(left:number = 0)

Comments

  • Bug scrolling vertically
    Bug scrolling vertically

    Nov 30, 2021

    Versions

    | react | 17.0.1 | | rsuite-table | 5.2.1 |

    What is the expected behavior?

    There is no bug when horizontal scroll is not at the beginning and it is scrolling vertically.

    What is the current behavior?

    When scrolling vertically and horizontal scroll is not at the beginning, is bugging on some rows not showing the appropriate cells.

    What are the steps to reproduce?

    Place the horizontal scroll in a different position from the beggining nas scroll vertically

    Reply
  • Cell标签加了verticalAlign后,单行超出省略功能不生效
    Cell标签加了verticalAlign后,单行超出省略功能不生效

    Dec 28, 2021

    Versions

    | package | version | | -------------- | ------- | | react | 17.0.2 | | rsuite-table | 5.3.0 |

    Cell标签加了verticalAlign后,单行超出省略功能不生效,官网示例可复现 image

    Reply
  • virtualized、wordWrap同时存在,虚拟列表会失效
    virtualized、wordWrap同时存在,虚拟列表会失效

    Dec 29, 2021

    Versions

    | package | version | | -------------- | ------- | | rsuite-table | 5.2.2 |

    virtualized、wordWrap同时存在,虚拟列表会失效

    Reply
  • 缩放容器中,table滚动条问题
    缩放容器中,table滚动条问题

    Jan 6, 2022

    Versions

    | package | version | | -------------- | ------- | | react | 16.14.0 | | rsuite-table | 5.3.0 |

    复现地址: https://codesandbox.io/s/gu-ding-biao-tou-antd-4-18-2-forked-7gets?file=/index.html

    Reply
  • build(deps): bump follow-redirects from 1.9.0 to 1.14.7
    build(deps): bump follow-redirects from 1.9.0 to 1.14.7

    Jan 13, 2022

    Bumps follow-redirects from 1.9.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • build(deps): bump copy-props from 2.0.4 to 2.0.5
    build(deps): bump copy-props from 2.0.4 to 2.0.5

    Jan 13, 2022

    Bumps copy-props from 2.0.4 to 2.0.5.

    Release notes

    Sourced from copy-props's releases.

    2.0.5

    Fix

    • Avoids prototype pollution (#7)

    Doc

    • Update license years.
    • Transfer ownership to Gulp Team (#6)

    Build

    • Update dependencies: each-props (>=1.3.2), is-plain-object (>=5.0.0).

    Test

    • Expand test versions to v11〜v14.
    Changelog

    Sourced from copy-props's changelog.

    Changelog

    3.0.1 (2021-10-31)

    Bug Fixes

    • ci: Rename prettierignore typo & avoid formatting web (192badf)
    • Update dependencies (ba8a51c)

    3.0.0 (2021-09-25)

    ⚠ BREAKING CHANGES

    • Normalize repository, dropping node <10.13 support (#8)

    Miscellaneous Chores

    • Normalize repository, dropping node <10.13 support (#8) (85b1165)
    Commits
    • 40b7974 2.0.5
    • 2c738f5 Fix: Avoids prototype pollution (#7)
    • 4cac863 Merge: Transfer ownership to Gulp Team (#6)
    • 54a791d Doc: Transfer ownership to Gulp Team
    • 196fc9e Merge: Update dependencies and expand ci test versions (#5)
    • e89907f Test: Update npm to v4 when nodejs is v5 because of npm install error.
    • e970322 Test: Run coveralls when nodejs >= 6 because of its supports
    • 063e534 Test: Add nodejs v11-v14 into ci test versions
    • 72270af Doc: Update license years
    • f60b928 Build: Update versions of dependencies
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Question | Table Filter/Search
    Question | Table Filter/Search

    Jun 4, 2019

    How would one go about building a filter by row or search?

    question 
    Reply
  • Cannot find module
    Cannot find module "react/lib/ReactDOM"

    Sep 9, 2017

    image 在安装了rsuite-table在文件里引用后报这个错误

    Reply
  • 功能请求:横向滚动加入虚拟渲染
    功能请求:横向滚动加入虚拟渲染

    Nov 28, 2019

    请问有没有后续增加table横向滚动增加虚拟渲染的计划,在使用中有列特别多的情况,目前table只做了竖向的虚拟渲染,这种情况下,渲染的dom量依然很大,上下滑动中有一些卡顿现象。不知道后续有没有这方面的计划。

    Reply
  • Scroll on mobile
    Scroll on mobile

    May 21, 2020

    Hi,

    I've started a brand new project with this library and create-react-app and looks good on bigger devices yet on mobile it's really hard to scroll. It takes several attempts to scroll up or down.

    Here it is the code I'm using:

        <Table
          autoHeight
          bordered
          data={users}
          virtualized
        >
          <Table.Column flexGrow={1}>
            <Table.HeaderCell>Id</Table.HeaderCell>
            <Table.Cell dataKey="id" />
          </Table.Column>
        </Table>
    

    I've tried to wrap it inside a div with overflow: auto but it doesn't seem to be helping.

    Thanks in advance!

    Reply
  • Uncaught TypeError: Cannot read property 'requestAnimationFrame' of undefined
    Uncaught TypeError: Cannot read property 'requestAnimationFrame' of undefined

    Mar 8, 2018

    Uncaught TypeError: Cannot read property 'requestAnimationFrame' of undefined 一直报这个错误 。找了好久资料 。还是没解决 。

    Reply
  • 可以考虑完善一下排序功能
    可以考虑完善一下排序功能

    Mar 5, 2019

    目前的排序的sortColumn只支持一个,可以考虑支持多个,举例一个场景就是:先按照出生日期排好序,然后按照英文名字典序在原来的基础上继续排序。

    Reply