https://github.com/react-widget/table-basic
https://react-widget.github.io/table-basic/
https://github.com/react-widget/table-basic
Last synced: 11 months ago
JSON representation
https://react-widget.github.io/table-basic/
- Host: GitHub
- URL: https://github.com/react-widget/table-basic
- Owner: react-widget
- License: mit
- Created: 2020-06-22T16:02:57.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-27T13:34:08.000Z (over 5 years ago)
- Last Synced: 2024-04-25T08:00:44.736Z (almost 2 years ago)
- Language: TypeScript
- Homepage:
- Size: 248 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-widget-table-basic
Table基础组件
## 安装
```
npm install --save react-widget-table-basic
```
## 使用
[](https://codesandbox.io/s/react-widget-table-basic-jujcd?fontsize=14&hidenavigation=1&theme=dark)
```js
import TableBasic from 'react-widget-table-basic';
import 'react-widget-table-basic/style';
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
];
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
];
;
```
### Interfaces
```ts
export interface TableBasicProps {
prefixCls?: string;
className?: string;
style?: React.CSSProperties;
columns: Column[];
data: T[];
tableLayout?: "auto" | "fixed";
getHeaderRowProps?: (props: RenderProps, columns: TCell>[], index: number) => RenderProps;
getRowProps?: (props: RenderProps, data: T, index: number) => RenderProps;
getRowKey: (data: T, index: number) => React.Key;
getRowClassName?: (data: T, index: number) => string;
showHeader?: boolean;
showBody?: boolean;
emptyText?: React.ReactNode;
emptyRender(props: RenderProps): React.ReactNode;
tableRender(props: RenderProps): React.ReactNode;
headerRender: (props: RenderProps) => React.ReactElement | null;
headerRowRender: (props: RenderProps) => React.ReactElement | null;
headerCellRender: (props: RenderProps) => React.ReactElement | null;
bodyRender: (props: RenderProps) => React.ReactElement | null;
bodyRowRender: (props: RenderProps) => React.ReactElement | null;
bodyCellRender: (props: RenderProps) => React.ReactElement | null;
}
export interface TableBasicState {
columns: Column[];
flattenColumns: Column[];
columnStore: TreeStore;
leafColumns: Column[];
computedColumn: TCell>[][];
}
export declare type DataType = Record;
export interface Column {
title?: React.ReactNode;
dataIndex?: string | number;
width?: string | number;
minWidth?: string | number;
maxWidth?: string | number;
className?: string;
key?: string | number;
align?: "left" | "center" | "right";
ellipsis?: boolean;
children?: Column[];
render?: (text: any, data: T, index: number) => React.ReactNode;
headerRender?: (text: any, column: Column, index: number) => React.ReactNode;
getCellProps?: (props: RenderProps, data: T, index: number) => RenderProps;
getHeaderCellProps?: (props: RenderProps, column: Column, index: number) => RenderProps;
}
export interface RenderProps extends React.AllHTMLAttributes {
key?: React.Key;
ref?: React.Ref;
children: React.ReactNode;
[x: string]: any;
}
```
### defaultProps
```js
{
prefixCls: "rw-table",
tableLayout: "auto",
columns: [],
data: [],
showHeader: true,
showBody: true,
getRowKey(data, index) {
return data["key"] ?? index;
},
emptyText: "No Data.",
emptyRender(props) {
return
;
},
tableRender(props) {
return ;
},
headerRender(props) {
return ;
},
headerRowRender(props) {
return ;
},
headerCellRender(props) {
return ;
},
bodyRender(props) {
return ;
},
bodyRowRender(props) {
return ;
},
bodyCellRender(props) {
return ;
},
}
```
### 基础样式
```css
.rw-table {
width: 100%;
table-layout: auto;
text-align: left;
border-style: solid;
border-width: 1px 0 0 1px;
border-color: #e8e8e8;
}
.rw-table-head-cell {
padding: 4px 10px;
background-color: #fafafa;
border-color: #e8e8e8;
border-style: solid;
border-width: 0 1px 1px 0;
line-height: 28px;
color: rgba(0, 0, 0, 0.85);
overflow-wrap: break-word;
}
.rw-table-body-cell {
padding: 4px 10px;
border-color: #e8e8e8;
border-style: solid;
border-width: 0 1px 1px 0;
line-height: 28px;
background-color: #fff;
overflow-wrap: break-word;
}
.rw-table-cell-ellipsis {
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
text-overflow: ellipsis;
}
.rw-table-empty-text {
background-color: #fff;
text-align: center;
}
```