rsuite-table

A React table component.

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

# use npm
npm i rsuite-table

# or use yarn
yarn add rsuite-table

# or use pnpm
pnpm add rsuite-table

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 }) => (
  
    <img width="50" src="{rowData[dataKey]}">
  
);

const App = () =&gt; (
  
      ID
      
    
      Name
      
    
      Email
      
        {(rowData, rowIndex) =&gt; {
          return <a href="{`mailto:${rowData.email}`}">{rowData.email}</a>;
        }}
      
    
      Avartar
      
    <table>
    

    

    

    
  </table>
);

API

``

``

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

``

``

There are three ways to use ``, as follows:

• 1.Associate the fields in the data with dataKey.

  Name
  

• 2.Customize a ``.

const NameCell = ({ rowData, ...props }) => (
  
    <a href="{`mailto:${rowData.email}`}">{rowData.name}</a><a>
  </a><a>
);


  Name
  

• 3.Customize functions directly within the ``.

  Name
  
    {(rowData, rowIndex) => {
      return </a><a href="{`mailto:${rowData.email}`}">{rowData.name}</a>;
    }}
  

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

Table ref

Type safety

We can pass generic type parameters to Table, Cell etc. for better type-safety when using typescript.

Passing a render prop to Table is recommended when using TS, as this will ensure that the right generic type parameter is automatically propagated to the Cell component.

const products: Product[] = [{ name: 'Pineapple' }];

 ref={table} data={products}>
  {({ Column, HeaderCell, Cell }) => (
    <>
      
        Name
        {/* No need for passing explicit type parameter to Cell */}
        {row => row.name}
      
    
  )}
<table></table>`, and the callback function returns `sortColumn`, `sortType` values.

### `;

In fact, the type parameter from table can be inferred from the data passed to it, so the type parameter to Table can also be skipped.

const products: Product[] = [{ name: 'Pineapple' }];


  {({ Column, HeaderCell, Cell }) => (
    <>
      
        Name
        {row => row.name}
      <table></table>
    
  )}
;

When writing reusable components, it is recommended to make your components generic as well. For example:

interface ImageCellProps> {
  rowData: TRow;
  dataKey: TKey;
  // ... any other props
}

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