我在 NPM 中的第一个库

基于 Material UI 的组件表。

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

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

材质表文档

用户界面材质

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
  },

]

组件示例

`
从 'table-component-mui-lib' 导入 { TableComponents, HeadCell }

      （
              <box sx="{{">
                
                  ; { }}
                             //>}
                    onClick={(e: React.ChangeEvent<htmlinputelement> | 任意) => { }} // 保护选择的数据}
                    标签=''
                  >>
                
                <iconbutton size="中" sx="{{" mr:>
                  




          

            
        </iconbutton></htmlinputelement></box>

以上是我在 NPM 中的第一个库的详细内容。更多信息请关注PHP中文网其他相关文章！