A table component with sorting and toggle display on columns. Based on ant-design
npm i @silverage/table-custom --save
yarn add @silverage/table-custom
pnpm add @silverage/table-custom
antd
is in peerDependencies
, choose your own version.
use-local-storage-state
.
- For React 17 and below, use
npm i use-local-storage-state@17
- For React 18 and later, use
npm i use-local-storage-state
(For details, see this)
✌️ Compatible with all the props of Ant-Design Table
import { TableCustom } from '@silverage/table-custom'
<TableCustom columns={columns} dataSource={dataSource} />
🪄 Boom! Just replace Ant-Design <Table />
with <TableCustom />
, It's all done.
type: ColumnTypeCustom<T>[]
default: undefined
Inherited from ColumnType in antd Table. Adding
disableCustom
prop to indicate that the column disable for customization.
type: string
default: undefined
Data Persistence Key. Set it to use localstorage to persist settings.
type: string
default: ''
The setting modal's title.
type: any[]
default: undefined
Do data persistence yourself
type: boolean
default: undefined
Enable sorting column.
type: ReactNode
default: undefined
Customize sorting handler icon.
type: boolean
default: undefined
Control setting model visible by yourself.
type: (checkedList: any[], sortedList: any[]) => void
default: undefined
The callback function when column changed.
type: () => void
default: undefined
The callback function when setting modal closed.