In the second half of 2020, several pictures flooded the screen: someone riding a bicycle to read, someone riding a bike while using a computer, someone covered with stacks of books on their bed… The student who “uses computer while riding a bike” is called “Curly king” and is trending on search. Gradually these students graduated, Curly King took scroll onto the society, driving others to roll together, roll more and more people, suffering unspeakable, resulting in some repeated wheel and some meaningless wheel phenomenon.

Making wheels was originally a good thing, but with the appearance of inner coiling, making wheels slowly evolved into an extreme. There were things like making wheels out of nothing and repeating wheels, which could not serve the business, but also made the phenomenon of inner coiling more and more serious, and the real suffering was unspeakable.

Analyzing the current business problems, then generating new ideas and summaries, using technology to improve work efficiency, improve the speed of development, is the real meaningful wheel, also worthy of a round.

scenario

The term CMS(Content Management System) has been around for a long time and usually refers to a content management system, which is a software system that sits between a WEB front end and a back-end office system or process. In the process of developing CMS background, the most commonly used should be Table, such as ANTD Table:

This should be the most commonly used development background management system used components, there is no Table, are embarrassed to say is a CMS system. However, in a relatively large business, there is a very common problem, that is, a data source will have many fields to display, if all of them are displayed, there will be a very ugly and messy feeling, dazzling. At the same time, different people want to see different fields, for example, student A wants to see titles 0, 1, 2, 3, B wants to see titles 1, 2, 3, 4, C wants to see titles 7, 8, 9, 10 and so on.

This is a very personalized demand, if the back-end students are expected to participate, it will increase the workload of back-end students, while the front-end work will not be reduced accordingly. Thanks to the localstorage storage capacity of the browser, the front end can be achieved, without the participation of back-end students.

implementation

First of all, since it is the Table component of ANTD, we must realize this requirement based on existing functions, so we need to set a layer on the basis of the Table component, so as not to affect the display of Table, but also to customize the display column. Then we can list the requirements:

1. Table display is not affected
2. You can choose to customize the display column
3. Display columns can be sorted
4. There will be no other impact on the business (this is the main thing)

Now that the requirements have been clear, we can open the whole, the specific implementation, not to say more, we can look at the effect after the implementation:

polishing

Now that you have implemented your initial requirements, you can rest easy. How could that be? Think too much!!

Yes, the product later said that now there are too many data display columns, which are three times more than before. I would like to group the data display columns when selecting them, otherwise they will all be crowded together and hard to find, which will seriously affect the work efficiency!

WTF!!!! The most can’t see others say that affect work efficiency, so serious problem how just say now, how not to raise demand earlier come over? Carry early to come over affirmation early realized ah, won’t put in the problem that affects working efficiency.

Ah!!!!!! I can be really a deceitful playing with women’s feelings of the man, but I know, tadpole is cheating playing with women’s feelings of the man, I don’t deserve!! Say many are tears, or grasp the need to do it. Take a look at the implementation:

Yeah, perfect. That’s what it looks like. Table encapsulation has been modified twice. On the basis of not affecting the way of use before, the ability to support grouping has been added. I am really TM great!

< p style = “max-width: 100%; clear: both; min-height: 1em

One day, one of our other platforms realized, gee, this feature works really well, can you give it to us? Well, the simplest and most direct way is to copy and paste. Halfway through the copy-and-paste process, someone else comes along and wants to use this feature, and WTMD is huge.

So, it’s better to package it as an NPM package. When I do, I will release it as a component package for you to install and use directly.

NPM I manage-table replicates the codeCopy the code

Go ahead and use it.

use

The installation

NPM I manage-table or yarn add manage-table Replicates the codeCopy the code

The manage-table component has corresponding peerDependencies. If you do not install peerDependencies, install them manually.

"PeerDependencies" : {" @ ant - design/ICONS ":" ^ 4.6.4 ", "antd" : "^ 4.12.0", "react" : "^ 17.0.0", "the react - beautiful - DND" : "^13.1.0"} Copy the codeCopy the code

Usage – : Direct reference, using built-in Settings

The code is as follows:

import ManageTable from "manage-table"; import './App.css'; import React from "react"; function App() { const mockColumns = new Array(50).fill('').map((_item: string, index) => { return { dataIndex: 'title' + index, key: 'title' + index, show: index % 3 === 0,} }); MockColumns. Push ({dataIndex: 'action', key: 'action', title: 'action', show: true,}); return ( <div className="App"> <ManageTable name="testTable" columns={mockColumns}/> </div> ); } export default App; Copy the codeCopy the code

The effect is as follows:

Usage Method 2: Customize the header part

The code is as follows:

import React from "react"; import { Button } from "antd"; import ManageTable from "manage-table"; export default function App2() { const mockColumns = new Array(50).fill("").map((_item, index) => { return { dataIndex: "Title" + index, key: "title" + index, show: index % 3 === 0}; }); MockColumns. Push ({dataIndex: "action", key: "action", title: "action", show: true}); const ref = React.createRef(); const handleShowModal = () => { ref.current.showModal(); }; Const SettingHeader = (<div style={{textAlign: "left"}}> <Button onClick={handleShowModal}> custom Settings </Button> </div>); return ( <div className="App"> <ManageTable ref={ref} SettingComp={SettingHeader} name="testTable2" columns={mockColumns} /> </div> ); } Duplicate codeCopy the code

The effect is as follows:

Use method three: group display

The code is as follows:

import React from "react"; import { Button } from "antd"; import ManageTable from "manage-table"; const mockGroup = () => { const data = new Array(4).fill('').map((_item:string, index: number) => { return { title: 'group' + index, records: new Array(10).fill(").map((_item: string, indx) => {return {dataIndex: 'title' + '_' + indx, key: 'title' + index + '_' + indx, title: 'title' + index + '_' + indx, show: indx % 5 === 0, }; })}; }); Data [0].records. Push ({dataIndex: 'action', key: 'action', title: 'action', show: true,}) return data; } export default function AppGroupRef() { const ref: any = React.createRef(); const handleSet = () => { ref.current.showModal(); } const SettingHeader = ( <div style={{textAlign: 'left'}}> <Button type="primary" onClick={handleSet}> custom Settings </Button> </div>); return ( <div className="App"> <ManageTable ref={ref} SettingComp={SettingHeader} name="testTableGroup" columns={mockGroup()}/> </div> ); } Duplicate codeCopy the code

The effect is as follows:

The other way

In addition to the above three methods, it also supports the configuration of fixed display, that is, some fields are displayed by default and cannot be sorted or deleted. Manage-table is stored in the browser cache by default. It follows the browser, and is also supported if you don’t want to use the browser cache and use custom storage.

Details are as follows:

ManageTable, inherited from ANTD Table

Parameter names	type	instructions
name	string	The unique key used for the storage
columns	ManageColumnType[]	GroupManageColumn[]
ref	React.createref () return object	Add panel, not mandatory
SettingComp	React.ReactNode	Custom set header, not mandatory
setTitle	The React. ReactNode, string	Custom popup title, default ‘set display field’, non-mandatory
defaultShowKeys	string[]	The fields displayed by default do not need to be selected or sorted
initialShowKeys	string[]	Initial display of fields for custom storage
onKeysSelected	(keys: string[]) => void	Store hook functions, used with custom stores

ManageColumnType, the ColumnType of Table inherited from ANTD

Parameter names	type	instructions
show	boolean	Default display

GroupManageColumn, inherited from antD Table ColumnType

Parameter names	type	instructions
title	string	The group name must be passed
records	ManageColumnType[]	Column data will be transmitted

Write in the last

Welcome to use and submit feedback.

• Open source repository: manage-table
• NPM address: manage-table

team

TNTWeb – Tencent news front end team, TNTWeb is committed to the exploration of cutting-edge technology in the industry and the improvement of team members’ personal ability. For front-end developers to organize the applets and the latest quality content in the field of web front-end technology, weekly update ✨, welcome star, github address: github.com/tnfe/TNT-We…