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

RSuite Table

  • 1.1.1
  • Source
  • npm
  • Socket score

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

rsuite-table

rsuite-table 是一个 React 实现的 <Table> 组件,主要特性有:

  • 支持固定表头,固定列(固定在左侧);
  • 支持自定义调整列宽;
  • 支持自定义单元格内容;
  • 支持显示树状表格;
  • 支持排序。

# 快速开始

安装:

npm install rsuite-table --save-dev

示例:

import react from 'react';
import ReactDOM from 'react-dom';
import { Table, Column, HeaderCell, Cell } from 'rsuite-table';
import 'rsuite-table/lib/less/index.less';

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

ReactDOM.render(

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

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

        <Column  width = {100} sort resizable>
            <HeaderCell>Email</HeaderCell>
            <Cell dataKey="email"></Cell>
        </Column>

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

    </Table> ,

    document.getElementById('mount')
);

FAQs

Package last updated on 26 Jun 2017

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