@zzwing/react-table

React Fixed Table

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
}