@zzwing/react-table
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.2 • Public • Published

    React Fixed Table

    CircleCI codecov

    Edit n3ml9m0zz4

    Document

    Document

    Install

    $ npm install @zzwing/react-table

    import { Table, HorizontalScrollBar } from '@zzwing/react-table'

    Usage

    Table

    Props Type Default Desc
    dataSource Array [] dataSource
    colums columnsProps[] [] columns props
    rowKey string none row key, unique, eg: id/a.b.c
    className string '' table classname
    style object {} table style
    multiLine boolean false if row is multiline, need to set true
    offsetTop number 0 thead fixed-top offset
    scrollBarOffset number 5 scrollbar fixed-bottom offset
    onRow (record: T) => TableRowProp -- a function return table row props
    type PlainObject = {
      [key: string]: any
    }
     
    interface TableProp<T extends PlainObject = PlainObject> {
      columns?: ColumnProps<T>[]
      dataSource?: T[]
      rowKey?: string
      className?: string
      style?: React.CSSProperties
      offsetTop?: number
      multiLine?: boolean
      scrollBarOffset?: number
      onRow?: (record: T) => TableRowProp
    }

    ColumnsProps

    Props Type Default Desc
    title any none column title
    key string none column key, default is dataIndex
    dataIndex string '' data field in each record, support chain eg: a.b.c.d
    render (text, record, index) => any () => {} column render function
    align left | right | center center text align
    className string '' --
    fixed left | right | right false fixed flag
    interface ColumnProps<T> {
      title?: React.ReactNode
      key?: React.Key
      dataIndex?: keyof T | string
      render?: (text: any, record: T, index: number) => React.ReactNode
      align?: 'left' | 'right' | 'center'
      className?: string
      fixed?: boolean | ('left' | 'right')
    }

    BaseTable

    like Table, but not fixed left and `right

    export interface BaseTableProp<T extends PlainObject = PlainObject> {
      columns?: ColumnProps<T>[]
      dataSource?: T[]
      rowKey?: string
      maxTop?: number
      getRef?: React.RefObject<HTMLTableElement>
      className?: string
      multiLine?: boolean
      style?: React.CSSProperties
      offsetTop?: number
      onRow?: (record: T) => TableRowProp
    }

    ScrollBar

    Props Type Default Desc
    className string '' scrollbar className
    scrollTarget string | HTMLElement window native scroll container
    offsetBottom number 5 scrollbar bottom offset
    interface HorizontalScrollBarProp {
      className?: string
      scrollTarget?: string | HTMLElement
      offsetBottom?: number
    }

    Install

    npm i @zzwing/react-table

    DownloadsWeekly Downloads

    28

    Version

    1.5.2

    License

    MIT

    Unpacked Size

    130 kB

    Total Files

    42

    Last publish

    Collaborators

    • zzwing