最近のいくつかのプロジェクトでは、フォームにカスタム フォーム フィールド設定関数を追加する必要が生じることがよくあります。つまり、ユーザーはどの列を表示する必要があるかを制御できます。
これは複数のプロジェクトで実装されており、各プロジェクトの要件はわずかに異なります。何度も反復されてきたため、時間をかけてこの関数をコンポーネント @silverage/table-custom にカプセル化し、これらの違いを統合しました。将来的にも使いやすく、メンテナンスも簡単です。同時に、この機能が必要な人にとっても便利です。
以下にインストールと使用方法を説明します。
インストール
npm i @silverage/table-custom --save
yarn add @silverage/table-custom
pnpm add @silverage/table-custom
コンポーネントはant-designその上に開発されるため、コンポーネントもインストールする必要がありますantd。これはデータの永続化に使用されuse-local-storage-state、インストールする必要があります。さらに、reactそれはピア依存でもあります。
使用
このコンポーネントの使用は非常に簡単で、元の antd コンポーネント<Table />と置き換えるだけです<TableCustom />。すべての antd テーブル属性と互換性があります。
import { TableCustom } from '@silverage/table-custom'
<TableCustom columns={columns} dataSource={dataSource} />
マウスをテーブルの上に置くと、テーブルの右上隅に歯車アイコンが表示されます。クリックして設定インターフェイスに入ります。チェックを入れることで列の表示/非表示を切り替えることができます。
単一行ヘッダーと 2 層結合ヘッダーをサポートします。
上のスクリーンショットでは、ID列が灰色になっていることに気づくかもしれませんが、これは、使用する際に一部の列を修正する必要があり、非表示にできないためです。これは、列を設定することで実現できますdisableCustom: true。
const columns = [
{
title: `ID`,
dataIndex: `id`,
key: `id`,
width: 100,
fixed: 'left',
disableCustom: true // here
}
]
さらに、変更した列を保存したい場合は、2 つの方法があります。1 つはローカルストレージを介して永続化する方法、もう 1 つはバックエンドを介してインターフェイスを提供する方法です。プロジェクトごとに実装方法が異なりますが、最近のいくつかのプロジェクトでは両方を使用しています。
localstorage メソッドは非常に簡単で、コンポーネントのstorageKey属性を指定するだけで済みます。
<TableCustom
storageKey="myKey"
columns={columns}
dataSource={dataSource}
/>
savedColumnsインターフェイス モードは、と の連携によって実現できますonChecklistChange。
const [savedColumns, setSavedColumns] = useState([])
<TableCustom
columns={columns}
dataSource={dataSource}
savedColumns={savedColumns ?? []}
onChecklistChange={async checkedList => {
const res = await api.request()
setSavedColumns(res?.data)
}}
/>
一定期間使用した後、一部のプロジェクトでは、歯車アイコンがわかりにくいと考え、それを制御するボタンをフォームに配置したいと考えたので、次の属性を追加して、ユーザーが制御できるようにしました。それは自分自身です。元のテーブルの上に他のボタンがある可能性があるためです。
const [visible, setVisible] = useState(false)
<Button onClick={() => setVisible(true)}>Open</Button>
<TableCustom
columns={columns}
dataSource={dataSource}
openCustomModal={visible} // here
onCustomModalClose={() => setVisible(false)} // and here
/>
その後、将来的に避けられないフィールドソート要件を満たすために、ソート機能が追加され、ソート可能なフィールドのみを設定する必要がありました。
<TableCustom
columns={columns}
dataSource={dataSource}
sortable
/>
フィールドの後ろのアイコンをマウスでドラッグするだけで、1層ヘッダーと2層ヘッダーもサポートされます。
アイコンのスタイルをカスタマイズすることもできます。
<TableCustom
columns={columns}
dataSource={dataSource}
sortable
sortHandler={<span>::</span>}
/>
完成したドキュメントを表示します: https://github.com/yuhongda/table-custom
楽しむ
Alibaba Cloudが深刻な障害に見舞われ、全製品に影響（復旧済み） ロシアのオペレーティングシステム「Aurora OS 5.0」、新UIが Tumblrで公開 多くのインターネット企業がHongmengプログラマーを緊急採用 .NET 8が正式にGA、最新版LTS版 UNIX時間 17億時代に突入しようとしている（すでに突入） XiaomiはXiaomi Velaが完全にオープンソースであり、基盤となるカーネルは NuttX Linux上の.NET 8であることを公式に発表しました。独立したサイズは50％削減されます。FFmpeg 6.1」ヘビサイド」リリース Microsoft、新たな「Windowsアプリ」を発売著者: JD Retail ユウ・ホンダ
出典：JD Cloud Developer Community Ziyuanqishuo Tech 転載の際は出典を明記してください