基于 material ui 的组件表。
这个想法来自于不同软件的不同实现中出现的许多困难
该板仅经过测试使用。 react 但可以在不同的工具中使用
材质表文档
ui 材质
1
npm i table-component-mui-lib
npm 文档
视频实现
参考表
数据源表中可见的数据 列 表中可见的列 ischeckbox 启用复选框以在列中进行多项选择 isradiobox radiobox 启用后只能从列中选择一个元素 selecteddata 挂钩选定的数据（这允许在主组件中使用数据） setselecteddata 挂钩 data 以选择数据 ispaginate true - false 生成表格分页 搜索 启用文本框以在表格内搜索 isdowmload 允许您启用下载 excel 文件的按钮 _stylecolumn 表格列的可定制样式 childrebutton 桌面上的可自定义按钮数据类型列
1
2
3
4
5
6
7
8
export interface headcell {
disablepadding?: boolean;
id?: keyof any;
label?: string;
numeric?: boolean;
sort?: boolean;
width?: number;
}
自定义列创建
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const column: headcell[] = [
{
id: id,
numeric: false,
disablepadding: false,
label: id,
sort: true
},
{
id: name,
numeric: false,
disablepadding: false,
label: name,
sort: true
},
{
id: username,
numeric: false,
disablepadding: false,
label: user name,
sort: true
},
{
id: email,
numeric: false,
disablepadding: false,
label: correo eléctronico,
sort: true
},
]
组件示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
`
import { TableComponents, HeadCell } from table-component-mui-lib
<TableComponents
dataSource={dataSource ?? []}
dataSourceExcel={dataTableFields.data ?? []}
columns={columns ?? []}
isCheckbox={false}
isRadioBox={false}
selectedData={data seleccionada de las columnas}
setSelectedData={hooks de selección de datos}
isPaginate
search
isDowmload
initialSelectionNumber={5}
_styleColumn={{ backgroundColor: `#cdcd`, color: #000 }}
childreButton={(row: any) => (
<Box sx={{ display: flex, gap: 1, alignContent: center }}>
<RadioGroup
aria-labelledby=demo-controlled-radio-buttons-group
name=controlled-radio-buttons-group
>
<FormControlLabel
sx={{ ml: 1 }}
control={<Radio
color=success
checked={boolean}
onClick={() => { }}
/>}
onClick={(e: React.ChangeEvent<HTMLInputElement> | any) => { }} // Guarda los datos de la fila seleccionada}
label=
/>
</RadioGroup>
<IconButton size=medium sx={{ mr: 1 }}>
<Edit
style={{ color: #000 }} onClick={() => { }}
/>
</IconButton>
</Box>
)}
/>
`