rsuite-table
    TypeScript icon, indicating that this package has built-in type declarations

    5.3.2 • Public • Published

    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: 'a@email.com', avartar: '...' },
      { id: 2, name: 'b', email: 'b@email.com', avartar: '...' },
      { id: 3, name: 'c', email: 'c@email.com', avartar: '...' }
    ];
    
    const ImageCell = ({ rowData, dataKey, ...rest }) => (
      <Cell {...rest}>
        <img src={rowData[dataKey]} width="50" />
      </Cell>
    );
    
    const App = () => (
      <Table data={dataList}>
        <Column width={100} sortable fixed resizable>
          <HeaderCell>ID</HeaderCell>
          <Cell dataKey="id" />
        </Column>
    
        <Column width={100} sortable resizable>
          <HeaderCell>Name</HeaderCell>
          <Cell dataKey="name" />
        </Column>
    
        <Column width={100} sortable 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
    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
    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
    renderRow (children?: ReactNode, rowData?: RowDataType) => ReactNode Custom row element
    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,(event)=>({x,y}) (true) Use the return value of shouldUpdateScroll to determine whether to update the scroll after the table size is updated.
    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
    rowSpan (rowData: any) => number Merges rows on the specified column.
    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.

    <ColumnGroup>

    Property Type (Default) Description
    align enum: 'left','center','right' Alignment
    fixed boolean, 'left', 'right' Fixed column
    groupHeaderHeight number The height of the header of the merged cell group. The default value is 50% of the table headerHeight
    header React.ReactNode Group header
    verticalAlign enum: 'top', 'middle', 'bottom' Vertical alignment

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

    (For nested data read this: https://github.com/rsuite/rsuite-table/issues/158)

    Methods

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

    Keywords

    none

    Install

    npm i rsuite-table

    DownloadsWeekly Downloads

    23,522

    Version

    5.3.2

    License

    MIT

    Unpacked Size

    564 kB

    Total Files

    267

    Last publish

    Collaborators

    • simonguo