我在 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'

      (
              
                
                   { }}
                             />}
                    onClick={(e: React.ChangeEvent | any) => {  }} // Guarda los datos de la fila seleccionada}
                    label=''
                  />
                
                
                   { }}
                  />
                

              
            )}
          />
`

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