react-widget-table-basic

安装

npm install --save react-widget-table-basic

使用

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',
 },
];
<TableBasic data={dataSource} columns={columns} />;

Interfaces

export interface TableBasicProps<T = DataType> {
 prefixCls?: string;
 className?: string;
 style?: React.CSSProperties;
 columns: Column<T>[];
 data: T[];
 tableLayout?: "auto" | "fixed";
 getHeaderRowProps?: (props: RenderProps, columns: TCell<Column<T>>[], 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<T = DataType> {
 columns: Column<T>[];
 flattenColumns: Column<T>[];
 columnStore: TreeStore;
 leafColumns: Column<T>[];
 computedColumn: TCell<Column<T>>[][];
}
export declare type DataType = Record<any, any>;
export interface Column<T = DataType> {
 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<T>[];
 render?: (text: any, data: T, index: number) => React.ReactNode;
 headerRender?: (text: any, column: Column<T>, index: number) => React.ReactNode;
 getCellProps?: (props: RenderProps, data: T, index: number) => RenderProps;
 getHeaderCellProps?: (props: RenderProps, column: Column<T>, index: number) => RenderProps;
}
export interface RenderProps extends React.AllHTMLAttributes<any> {
 key?: React.Key;
 ref?: React.Ref<any>;
 children: React.ReactNode;
 [x: string]: any;
}

defaultProps

{
	prefixCls: "rw-table",
	tableLayout: "auto",
	columns: [],
	data: [],
	showHeader: true,
	showBody: true,
	getRowKey(data, index) {
		return data["key"] ?? index;
	},
	emptyText: "No Data.",
	emptyRender(props) {
		return <div {...props} />;
	},
	tableRender(props) {
		return <table {...props} />;
	},
	headerRender(props) {
		return <thead {...props} />;
	},
	headerRowRender(props) {
		return <tr {...props} />;
	},
	headerCellRender(props) {
		return <th {...props} />;
	},
	bodyRender(props) {
		return <tbody {...props} />;
	},
	bodyRowRender(props) {
		return <tr {...props} />;
	},
	bodyCellRender(props) {
		return <td {...props} />;
	},
}

基础样式

.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;
}