react-widget-table-basic

Table基础组件

安装

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

使用

importTableBasicfrom'react-widget-table-basic';import'react-widget-table-basic/style';constdataSource=[{key: '1',name: '胡彦斌',age: 32,address: '西湖区湖底公园1号',},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号',},];constcolumns=[{title: '姓名',dataIndex: 'name',key: 'name',},{title: '年龄',dataIndex: 'age',key: 'age',},{title: '住址',dataIndex: 'address',key: 'address',},];<TableBasicdata={dataSource}columns={columns}/>;

Interfaces

exportinterfaceTableBasicProps<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;}exportinterfaceTableBasicState<T=DataType>{columns: Column<T>[];flattenColumns: Column<T>[];columnStore: TreeStore;leafColumns: Column<T>[];computedColumn: TCell<Column<T>>[][];}exportdeclaretypeDataType=Record<any,any>;exportinterfaceColumn<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;}exportinterfaceRenderPropsextendsReact.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){returndata["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:1px001px;
border-color:#e8e8e8;
}
.rw-table-head-cell {
padding:4px10px;
background-color:#fafafa;
border-color:#e8e8e8;
border-style: solid;
border-width:01px1px0;
line-height:28px;
color:rgba(0,0,0,0.85);
overflow-wrap: break-word;
}
.rw-table-body-cell {
padding:4px10px;
border-color:#e8e8e8;
border-style: solid;
border-width:01px1px0;
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;
}