Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rsuite-table

Package Overview
Dependencies
Maintainers
1
Versions
223
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rsuite-table

A React table component

  • 3.15.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
82K
increased by0.32%
Maintainers
1
Weekly downloads
 
Created
Source

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>

PropertyType (Default)Description
affixHeaderboolean,numberAffix the table header to the specified position on the page
affixHorizontalScrollbarboolean,numberAffix the table horizontal scrollbar to the specified position on the page
autoHeightbooleanAutomatic height
bodyRef(ref: HTMLElement) => voidA ref attached to the table body element
borderedbooleanShow border
cellBorderedbooleanShow cell border
data *object[]Table data
defaultExpandAllRowsbooleanExpand all nodes By default
defaultExpandedRowKeysstring[]Specify the default expanded row by rowkey
defaultSortTypeenum: 'desc', 'asc'Sort type
expandedRowKeysstring[]Specify the default expanded row by rowkey (Controlled)
headerHeightnumber(40)Table Header Height
heightnumber(200)Table height
hoverboolean (true)The row of the table has a mouseover effect
isTreebooleanShow as Tree table
loadingbooleanShow loading
localeobject: { emptyMessage: ('No data'), loading: ('Loading...') }Messages for empty data and loading states
minHeightnumber (0)Minimum height
onDataUpdated(nextData: object[], scrollTo: (coord: { x: number; y: number }) => void) => voidCallback after table data update.
onExpandChange(expanded:boolean,rowData:object)=>voidTree table, the callback function in the expanded node
onRowClick(rowData:object, event: SyntheticEvent)=>voidClick the callback function after the row and return to rowDate
onRowContextMenu(rowData:object, event: SyntheticEvent)=>voidInvoke the callback function on contextMenu and pass the rowData
onScroll(scrollX:object, scrollY:object)=>voidCallback function for scroll bar scrolling
onSortColumn(dataKey:string, sortType:string)=>voidClick the callback function of the sort sequence to return the value sortColumn, sortType
renderEmpty(info: React.ReactNode) => React.ReactNodeCustomized data is empty display content
renderLoading(loading: React.ReactNode) => React.ReactNodeCustomize the display content in the data load
renderRowExpanded(rowDate?: Object) => React.ReactNodeCustomize what you can do to expand a zone
renderTreeToggle(icon:node,rowData:object,expanded:boolean)=> nodeTree table, the callback function in the expanded node
rowClassNamestring , (rowData:object)=>stringAdd an optional extra class name to row
rowExpandedHeightnumber (100)Set the height of an expandable area
rowHeightnumber(46), (rowData: object) => numberRow height
rowKeystring ('key')Each row corresponds to the unique key in data
rtlbooleanRight to left
shouldUpdateScrollboolean(true)Whether to update the scroll bar after data update
showHeaderboolean (true)Display header
sortColumnstringSort column name ˝
sortTypeenum: 'desc', 'asc'Sort type (Controlled)
virtualizedbooleanEffectively render large tabular data
widthnumberTable width

<Column>

PropertyType (Default)Description
alignenum: 'left','center','right'Alignment
colSpannumberMerges column cells to merge when the dataKey value for the merged column is null or undefined.
fixedboolean, 'left', 'right'Fixed column
flexGrownumberSet the column width automatically adjusts, when set flexGrow cannot set resizable and width property
minWidthnumber(200)When you use flexGrow, you can set a minimum width by minwidth
onResize(columnWidth?: number, dataKey?: string) => voidCallback after column width change
resizablebooleanCustomizable Resize Column width
sortablebooleanSortable
treeColbooleanA column of a tree.
verticalAlignenum: 'top', 'middle', 'bottom'Vertical alignment
widthnumberColumn 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>

PropertyType (Default)Description
alignenum: 'left','center','right'Alignment
fixedboolean, 'left', 'right'Fixed column
verticalAlignenum: 'top', 'middle', 'bottom'Vertical alignment
headerReact.ReactNodeGroup header

<Cell>

PropertyType (Default)Description
dataKeystringData binding key, but also a sort of key
rowDataobjectRow data
rowIndexnumberRow 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)

FAQs

Package last updated on 27 Apr 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc