Based on business precipitation component=> manage-table

2020 In the second half of , There are several pictures on the screen ： Someone is reading on a bike , Someone uses a computer while riding a bike , Someone's bed is covered with a pile of books ……“ Ride a bike and use a computer ” My classmates are called “ Roll King ” Board hot search . Slowly, these students graduated , The scroll King took the scroll to the society , Led others to roll together , More and more people are rolling , miserable , This leads to the phenomenon of repeatedly building wheels and making meaningless wheels .

To build the wheels , It was a good thing , But with the emergence of involution , Making wheels has slowly evolved into an extreme , There are things about making wheels out of thin air and repeatedly making wheels , Can't serve the business , It also makes the phenomenon of involution more and more serious , The real pain is unbearable .

Analyze the problems encountered in the current business , And then produce new ideas and summaries , Using technology to improve work efficiency , Speed up development , Is the real meaningful wheel , It's not in vain volume a .

scene

CMS(content management system) The word has been around for a long time , It usually refers to content management systems , It's a kind of being in WEB Software system between front-end and back-end office systems or processes . Developing cms In the background , The most commonly used should be Table 了 , for example antd Of table:

picture .png This should be the most commonly used component in the development background management system , No Table, I'm sorry to say it's a cms System . However, there is a very common problem in a slightly larger business , A data source will have many fields to display , What if they all show up , There will be a very unsightly and messy feeling , See things in a blur . Different people at the same time , The fields you want to see are also different , such as A Students want to see the title 0、1、2、3,B Students want to see the title 1、2、3、4,C Students want to see the title 7、8、9、10 etc. .

This is a very personalized demand , If you want the back-end students to participate , It will increase the workload of back-end students , At the same time, the front-end work will not be reduced accordingly . Thanks to the browser localstorage Storage capacity , The front end can realize , There is no need for the participation of back-end students .

Realization

First , Since it is antd Of Table Components , We must realize this requirement based on the existing functions , So we need to be able to Table Set a layer on the basis of components , Neither influence Table The exhibition of , At the same time, it can also customize the display column . Then we can list the requirements ：

No effect Table The exhibition of
You can choose to customize the display column
You can sort the display columns
There will be no other impact on the business ( This is the main thing )

Now that the requirements are clear , We can drive the whole , Concrete implementation , Not much , We can see the effect after implementation ：

picture .png

polishing

Now that the initial requirements have been met , You can have a good sleep . How could it be ？ Think too much ！！！

Yes , Later, the product said , Now there are too many data display columns , Three times more than before , I want to group when selecting the display columns , Otherwise, they are all crowded together and hard to find , Seriously affect the work efficiency ！

WTF！ I can't see that others say it affects work efficiency , How can such a serious problem be said now , Why don't you ask for it earlier ？ It must have been realized long ago , There will be no problem affecting work efficiency .

ah ！！！ I'm such a duplicity scum man , But I know , Little tadpoles are scum men , I don't deserve it ！！ It's all tears , Let's hurry to meet the demand . See the effect ：

picture .png Um. , perfect , That's the effect . Yes Table The packaging of has been modified twice , Without affecting the previous use , Added capability support for grouping , I really TM Great ！

> However , Happy time is always so short ~~

one day , Our other platform found , Why , Your function is very easy to use , Can you give it to us , ok , The simplest and most direct way is to copy and paste . Copy and paste halfway through , Suddenly, another person wants to use this function ,WTMD It's big .

In this way , Or encapsulated into a npm Bag it , I'll wait , I'll release it to you as a component package , You can install it directly .

npm i manage-table
 Copy code

Just use it .

Use

install

npm i manage-table
or
yarn add manage-table
 Copy code

manage-table Components have corresponding peerDependencies, If not installed , You need to manually install the corresponding dependencies ：

"peerDependencies": {
  "@ant-design/icons": "^4.6.4",
  "antd": "^4.12.0",
  "react": "^17.0.0",
  "react-beautiful-dnd": "^13.1.0"
}
 Copy code

Usage mode -： Direct reference , Use 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,
      title: ' title ' + index,
      show: index % 3 === 0,
    };
  });
  mockColumns.push({
    dataIndex: 'action',
    key: 'action',
    title: ' operation ',
    show: true,
  });
  return (
    <div className="App">
      <ManageTable name="testTable" columns={mockColumns}/>
    </div>
  );
}

export default App;
 Copy code

The effect is as follows ：

picture .png

Mode 2 ： Customize 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,
      title: " title " + index,
      show: index % 3 === 0
    };
  });
  mockColumns.push({
    dataIndex: "action",
    key: "action",
    title: " operation ",
    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>
  );
}
 Copy code

The effect is as follows ：

picture .png

Three ways to use it ： In groups

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: ' grouping ' + index,
      records: new Array(10).fill('').map((_item: string, indx) => {
        return {
          dataIndex: 'title' + index + '_' + indx,
          key: 'title' + index + '_' + indx,
          title: ' title ' + index + '_' + indx,
          show: indx % 5 === 0,
        };
      }),
    };
  });
  //  Any index can , It doesn't have to be 0
  data[0].records.push({
    dataIndex: 'action',
    key: 'action',
    title: ' Operation column ',
    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>
  );
}
 Copy code

The effect is as follows ：

picture .png

The other way

In addition to the above three ways , It also supports the configuration of fixed display , That is, some fields are displayed by default and cannot be sorted or deleted .manage-table The default is stored in the browser's cache , Follow the browser , If you don't want to go browser caching , It is Custom storage Words , Also supportive .

As follows ：

ManageTable, Inherited from antd Of Table

Parameter name	type	explain
name	string	The only... Used for storage key, Will pass
columns	ManageColumnType[]	GroupManageColumn[]
ref	React.createRef() The return object of	Add panel , Not necessarily
SettingComp	React.ReactNode	Custom settings header , Not necessarily
setTitle	React.ReactNode、string	Custom pop-up title , Default ' Set display field ', Not necessarily
defaultShowKeys	string[]	Fields displayed by default , There is no need to make a choice or Sort
initialShowKeys	string[]	Initially displayed fields , Custom storage
onKeysSelected	(keys: string[]) => void	Store hook functions , Use with custom storage

ManageColumnType, Inherited from antd Of Table Of ColumnType

Parameter name	type	explain
show	boolean	Whether to display by default

GroupManageColumn, Inherited from antd Of Table Of ColumnType

Parameter name	type	explain
title	string	Group name , Will pass
records	ManageColumnType[]	Column data , Will pass

At the end

Welcome to use and submit feedback .

Open source repository ：manage-table
npm Address : manage-table

The team

TNTWeb - Tencent News front-end team ,TNTWeb We are committed to exploring cutting-edge technologies in the industry and improving the personal ability of team members . For front-end developers to sort out small programs and web The latest high-quality content in front-end technology , Weekly update , welcome star,github Address ：https://github.com/tnfe/TNT-Weekly