Add field settings to React Ant-Design Table | JD Cloud Technical Team

From data to large model application, on November 25th, Hangzhou Yuanchuang Conference was held to share development tips.

Several recent projects have often encountered the need to add a custom form field setting function to the form. That is, users can control which columns need to be displayed.

It has been implemented in several projects, and the requirements of each project are slightly different. It has been iterated many times, so I took the time to encapsulate this function into a component: @silverage/table-custom to integrate these differences . It is easy to use and maintain in the future. At the same time, it is also convenient for people who need this function to use.

The following describes the installation and use of

Install

npm i @silverage/table-custom --save
yarn add @silverage/table-custom
pnpm add @silverage/table-custom

Components ant-designare developed on top of that, so you have to install them too antd. It is used for data persistence use-local-storage-stateand needs to be installed. In addition, reactit is also peer dependency.

use

<Table />The component is very simple to use, just replace your original antd one <TableCustom />. Compatible with all antd table attributes.

import { TableCustom } from '@silverage/table-custom'

<TableCustom columns={columns} dataSource={dataSource} />

When the mouse is hovering over the table, a gear icon will appear in the upper right corner of the table. Click to enter the setting interface. Columns can be hidden/shown by checking them.

Supports single-row headers and double-layer merged headers.

You may notice that in the screenshot above, IDthe columns are gray. This is because when using, the business wants some columns to be fixed and cannot be hidden. This can be achieved by setting the column disableCustom: true.

const columns = [
    {
        title: `ID`,
        dataIndex: `id`,
        key: `id`,
        width: 100,
        fixed: 'left',
        disableCustom: true // here
    }
]

In addition, if you want to save the modified columns, there are two ways: one is to persist through localstorage, and the other is to provide an interface through the backend. Different projects choose different ways to implement it, and several recent projects have used both.

The localstorage method is very simple, you only need to provide component storageKeyattributes.

<TableCustom
    storageKey="myKey"
    columns={columns}
    dataSource={dataSource}
/>

Interface mode can be achieved through savedColumnsand onChecklistChangecooperation.

const [savedColumns, setSavedColumns] = useState([])

<TableCustom
    columns={columns}
    dataSource={dataSource}
    savedColumns={savedColumns ?? []}
    onChecklistChange={async checkedList => {
        const res = await api.request()
        setSavedColumns(res?.data)
    }}
/>

After using it for a period of time, in some projects, "no one but you" thought that the gear icon was too obscure and wanted to put a button on the form to control it, so I added the following attributes , letting users control it themselves. Because there may be other buttons above the original table.

const [visible, setVisible] = useState(false)
<Button onClick={() => setVisible(true)}>Open</Button>
<TableCustom
    columns={columns}
    dataSource={dataSource}
    openCustomModal={visible} // here
    onCustomModalClose={() => setVisible(false)} // and here
/>

After some time, in order to meet the inevitable field sorting requirements in the future, a sorting function was added, and only the sortable field needed to be set.

<TableCustom
    columns={columns}
    dataSource={dataSource}
    sortable
/>

Just drag the icon behind the field with the mouse. It also supports single-layer and double-layer headers!

You can also customize the icon style:

<TableCustom
    columns={columns}
    dataSource={dataSource}
    sortable
    sortHandler={<span>::</span>}
/>

---

View the completed documentation: https://github.com/yuhongda/table-custom

Enjoy

Author: JD Retail Yu Hongda

Source: JD Cloud Developer Community Ziyuanqishuo Tech Please indicate the source when reprinting

Alibaba Cloud suffered a serious failure, affecting all products (has been restored). The Russian operating system Aurora OS 5.0, a new UI, was unveiled on Tumblr. Many Internet companies urgently recruited Hongmeng programmers . .NET 8 is officially GA, the latest LTS version UNIX time About to enter the 1.7 billion era (already entered) Xiaomi officially announced that Xiaomi Vela is fully open source, and the underlying kernel is .NET 8 on NuttX Linux. The independent size is reduced by 50%. FFmpeg 6.1 "Heaviside" is released. Microsoft launches a new "Windows App"

{{o.name}}

{{m.name}}