基于 material ui 的组件表。
这个想法来自于不同软件的不同实现中出现的许多困难
该板仅经过测试使用。 react 但可以在不同的工具中使用
材质表文档
ui 材质
npm i table-component-mui-lib
npm 文档
视频实现
参考表
- 数据源表中可见的数据
- 列 表中可见的列
- ischeckbox 启用复选框以在列中进行多项选择
- isradiobox radiobox 启用后只能从列中选择一个元素
- selecteddata 挂钩选定的数据（这允许在主组件中使用数据）
- setselecteddata 挂钩 data 以选择数据
- ispaginate true - false 生成表格分页
- 搜索 启用文本框以在表格内搜索
- isdowmload 允许您启用下载 excel 文件的按钮
- _stylecolumn 表格列的可定制样式
- childrebutton 桌面上的可自定义按钮
数据类型列
export interface headcell {
disablepadding?: boolean;
id?: keyof any;
label?: string;
numeric?: boolean;
sort?: boolean;
width?: number;
}
自定义列创建
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
},
]
组件示例
`
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>
)}
/>
`
