我在 NPM 中的第一个库-js教程-PHP中文网

基于 material ui 的组件表。

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

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

材质表文档

ui 材质

npm i table-component-mui-lib

npm 文档

视频实现

2088shop商城购物系统

2088shop商城购物系统是商城系统中功能最全的一个版本：非会员购物、商品无限级分类、不限商品数量、商品多级会员定价、上货库存、Word在线编辑器、订单详情销售报表、商品评论、留言簿、管理员多级别、VIP积分、会员注册积分奖励、智能新闻发布、滚动公告、投票调查、背景图片颜色更换、店标上传、版权联系方式修改、背景音乐（好歌不断）、广告图片支持Flash、弹出浮动广告、搜索引擎关健词优化、图文友情联

下载

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'

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

              
            )}
          />
`