我在 NPM 中的第一个库

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《我在 NPM 中的第一个库》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

基于 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>
            )}
          />
`

终于介绍完啦！小伙伴们，这篇关于《我在 NPM 中的第一个库》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！