故宮での私の最初の図書館

マテリアル UI に基づくコンポーネント テーブル。

これは、さまざまなソフトウェアでのさまざまな実装で生じた多くの困難から生まれたアイデアです

このボードは使用してのみテストされています。 React ですが、さまざまなツールで使用できます

材料表のドキュメント

UI マテリアル

npm i table-component-mui-lib

NPM ドキュメント

ビデオの実装

参照テーブル

• dataSource テーブルに表示されるデータ
• columns テーブルに表示される列
• isCheckbox チェックボックスは列の複数選択に対して有効です
• isRadioBox RadioBox は列からの要素のみを選択できるようになります
• selectedData 選択されたデータをフックします (これにより、データをメインコンポーネントで使用できるようになります)
• setSelectedData データをフックしてデータを選択します
• 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'

     <テーブルコンポーネント
            dataSource={データソース ?? []}
            dataSourceExcel={dataTableFields.data ?? []}
            列={列 ?? []}
            isCheckbox={false}
            isRadioBox={false}
            selectedData={列のデータ選択}
            setSelectedData={データ選択のフック}
            isページネーション
            検索
            はダウンロード
            初期選択番号={5}
            _styleColumn={{ 背景色: `#cdcd`、色: '#000' }}
            childreButton={(行: 任意) => (
              <Box sx={{ 表示: 'flex'、ギャップ: 1、alignContent: 'center' }}>
                <ラジオグループ
                  aria-labelledby='デモ制御ラジオボタングループ'
                  name='制御されたラジオボタングループ'
                >
                  <フォームコントロールラベル
                    sx={{ ml: 1 }}
                    control={<ラジオ
                      color='成功'
                      チェック済み={ブール値}
                      onClick={() => { }}
                             />}
                    onClick={(e: React.ChangeEvent<HTMLInputElement> | 任意) => { }} // フィラの選択を保護します}
                    ラベル=''
                  />
                </RadioGroup>
                <IconButton size='medium' sx={{ mr: 1 }}>
                  <編集
                   >




          

            
        

以上が故宮での私の最初の図書館の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。