我在 NPM 中的第一个库-js教程-、刘德华、刘亦菲、谌洪

基于 material ui 的组件表。

这个想法来自于不同软件的不同实现中出现的许多困难

该板仅经过测试使用。 react 但可以在不同的工具中使用

材质表文档

ui 材质

npm i table-component-mui-lib

登录后复制

npm 文档

视频实现

video demo instalación librería

参考表

数据源表中可见的数据
列表中可见的列
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>
            )}
          />
`

登录后复制

以上就是我在 NPM 中的第一个库的详细内容，更多请关注php中文网其它相关文章！