@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
}

Package Sidebar

Install

npm i @zzwing/react-table

Weekly Downloads

2

Version

1.5.2

License

MIT

Unpacked Size

130 kB

Total Files

42

Last publish

Collaborators

  • zzwing