我在 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中文網其他相關文章！