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

    7.22.2 • Public • Published

    rc-table

    React table component with useful functions.

    NPM version dumi build status Test coverage Dependencies DevDependencies npm download bundle size

    install

    rc-table

    Development

    npm install
    npm start
    

    Example

    https://table.react-component.now.sh/

    Usage

    import Table from 'rc-table';
    
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        width: 100,
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        width: 100,
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
        width: 200,
      },
      {
        title: 'Operations',
        dataIndex: '',
        key: 'operations',
        render: () => <a href="#">Delete</a>,
      },
    ];
    
    const data = [
      { name: 'Jack', age: 28, address: 'some where', key: '1' },
      { name: 'Rose', age: 36, address: 'some where', key: '2' },
    ];
    
    React.render(<Table columns={columns} data={data} />, mountNode);

    API

    Properties

    Name Type Default Description
    tableLayout auto | fixed auto | fixed for any columns is fixed or ellipsis or header is fixed https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
    prefixCls String rc-table
    className String additional className
    id String identifier of the container div
    useFixedHeader Boolean false whether use separator table for header. better set width for columns
    scroll Object {x: false, y: false} whether table can be scroll in x/y direction, x or y can be a number that indicated the width and height of table body
    expandable Object Config expand props
    expandable.defaultExpandAllRows Boolean false Expand All Rows initially
    expandable.defaultExpandedRowKeys String[] [] initial expanded rows keys
    expandable.expandedRowKeys String[] current expanded rows keys
    expandable.expandedRowRender Function(recode, index, indent, expanded):ReactNode Content render to expanded row
    expandable.expandedRowClassName Function(recode, index, indent):string get expanded row's className
    expandable.expandRowByClick boolean Support expand by click row
    expandable.expandIconColumnIndex Number 0 The index of expandIcon which column will be inserted when expandIconAsCell is false
    expandable.expandIcon props => ReactNode Customize expand icon
    expandable.indentSize Number 15 indentSize for every level of data.i.children, better using with column.width specified
    expandable.rowExpandable (record) => boolean Config row support expandable
    expandable.onExpand Function(expanded, record) function to call when click expand icon
    expandable.onExpandedRowsChange Function(expandedRows) function to call when the expanded rows change
    expandable.fixed String | Boolean - this expand icon will be fixed when table scroll horizontally: true or left or right and expandIconColumnIndex need to stay first or last
    rowKey string or Function(record):string 'key' If rowKey is string, record[rowKey] will be used as key. If rowKey is function, the return value of rowKey(record) will be use as key.
    rowClassName string or Function(record, index, indent):string get row's className
    rowRef Function(record, index, indent):string get row's ref key
    data Object[] data record array to be rendered
    onRow Function(record, index) Set custom props per each row.
    onHeaderRow Function(record, index) Set custom props per each header row.
    showHeader Boolean true whether table head is shown
    title Function(currentData) table title render function
    footer Function(currentData) table footer render function
    emptyText React.Node or Function No Data Display text when data is empty
    columns Object[] The columns config of table, see table below
    components Object Override table elements, see #171 for more details
    sticky boolean | {offsetHeader?: number, offsetScroll?: number, getContainer?: () => Window | HTMLElement } false stick header and scroll bar

    Column Props

    Name Type Default Description
    key String key of this column
    className String className of this column
    colSpan Number thead colSpan of this column
    title React Node title of this column
    dataIndex String display field of the data record
    width String | Number width of the specific proportion calculation according to the width of the columns
    fixed String | Boolean this column will be fixed when table scroll horizontally: true or 'left' or 'right'
    align String specify how cell content is aligned
    ellipsis Boolean specify whether cell content be ellipsized
    onCell Function(record, index) Set custom props per each cell.
    onHeaderCell Function(record) Set custom props per each header cell.
    render Function(value, row, index) The render function of cell, has three params: the text of this cell, the record of this row, the index of this row, it's return an object:{ children: value, props: { colSpan: 1, rowSpan:1 } } ==> 'children' is the text of this cell, props is some setting of this cell, eg: 'colspan' set td colspan, 'rowspan' set td rowspan

    License

    rc-table is released under the MIT license.

    Install

    npm i rc-table

    DownloadsWeekly Downloads

    759,619

    Version

    7.22.2

    License

    MIT

    Unpacked Size

    277 kB

    Total Files

    152

    Last publish

    Collaborators

    • benjycui
    • yesmeck
    • afc163
    • yiminghe
    • dxq613
    • paranoidjk
    • zombiej
    • xrkffgg