https://github.com/zwingz/react-table
react-fixed-table component
https://github.com/zwingz/react-table
component fixed-table react table
Last synced: about 2 months ago
JSON representation
react-fixed-table component
- Host: GitHub
- URL: https://github.com/zwingz/react-table
- Owner: zWingz
- Created: 2018-10-13T09:13:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-29T15:12:14.000Z (about 3 years ago)
- Last Synced: 2025-05-18T22:14:00.791Z (about 1 year ago)
- Topics: component, fixed-table, react, table
- Language: TypeScript
- Homepage: https://zwing.site/react-table/#/
- Size: 3.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# React Fixed Table
[](https://circleci.com/gh/zWingz/react-table/tree/master) [](https://codecov.io/gh/zWingz/react-table)
[](https://codesandbox.io/s/n3ml9m0zz4)
## Document
[Document](http://zwing.site/react-table/#/)
## Install
`$ npm install @zzwing/react-table`
`import { Table, HorizontalScrollBar } from '@zzwing/react-table'`
## Usage
### Table
| Props | Type | Default | Desc |
| --------------- | ------------------------------- | ------- | ------------------------------------- |
| dataSource | Array | [] | dataSource |
| colums | [columnsProps](#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 |
```typescript
type PlainObject = {
[key: string]: any
}
interface TableProp {
columns?: ColumnProps[]
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 |
```typescript
interface ColumnProps {
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
```typescript
export interface BaseTableProp {
columns?: ColumnProps[]
dataSource?: T[]
rowKey?: string
maxTop?: number
getRef?: React.RefObject
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 |
```typescript
interface HorizontalScrollBarProp {
className?: string
scrollTarget?: string | HTMLElement
offsetBottom?: number
}
```