The front-end table component, which is probably the most frequently used component on the PC side, is also the one that product managers (usually also UE,EX) struggle with the most. After many years of torturing, the table component became the only technical point in the circle I dared to describe as proficient.

The product manager is unconstrained

Not many people think of a Product as a Manager.

The product handed me a requirements document with three random pauses: “Add a list and search. It’s easy. Can we do it tomorrow?” I picked up my smudged coffee cup and took a deep sip. If you just think I am thirsty, that is superficial, to know that the mouth is stack structure, not until I finish this long coffee, I will not promise to go online tomorrow.

This is the final stubbornness of the programmer.

However, I regretted it within minutes of agreeing, because more than half of the requirements document that was less than a screen long was an interactive description of the table:

  • The width of the column is adjustable
  • The order of columns can be adjusted
  • Columns can be configured to show and hide
  • After the user refreshes, the width, sequence, and display state must be maintained
  • Right click download
  • Support for copying cell content
  • You can print the current page
  • Row data can be moved up and down (optional)

Looking at the last table after the interaction of this non – mandatory, I was moved dare not move.

The table component responds

Product abuse me a thousand times, I treat the product like first love

This is a Vue project first, so start with Grid Manager-vue and complete the basic configuration.

// vue template <grid-manager :option="tableOption"></grid-manager> // vue js import GridManager from 'gridmanager-vue';  import 'gridmanager-vue/css/gm-vue.css'; Vue.use(GridManager); Const app = new Vue({el: '#app', data: {tableOption:{gridManagerName: 'table-key', // mandatory, global unique columnData:[{key: 'PIC' text: 'thumbnail'}, {key: 'title', the text: 'title'}, / /... other column information]}}});Copy the code

Once the basic work is done, you can configure tableOption to implement the functionality required by the product manager.

The width of the column is adjustableAPI

TableOption: {supportAdjust: true, // enable by default //... Other configurations}Copy the code

The order of columns can be adjustedAPI

TableOption: {supportDrag: true, // enable by default //... Other configurations}Copy the code

Columns can be configured to show and hideAPI

TableOption: {supportConfig: false, // configInfo: 'Display state of configuration column ', // Description of configuration area //... Other configuration items}Copy the code

After the user refreshes, the width, sequence, and display state must be maintainedAPI

TableOption: {disableCache: false, // Default memory function is disabled //... Other configuration items}Copy the code

Right click downloadAPI

TableOption: {supportExport: true, // exportConfig: {// Export method: static by default // 1.static: The front-end static export does not require the back-end interface. The exported files are not perfect. // 2.blob: returns a binary stream through a back-end interface. 'nodejs' can use' js-xlsx 'and' Java 'can use' org.apache.poi 'to generate binary streams. Mode: 'static', // The name of the exported file, string or function type. If it is a function, a string must be returned. FileName: (query) => {return 'downloaded fileName '; } / / export suffix, optional [' like ', 'CSV'], the default for ` XLS ` suffix: 'XLS ', // export processor function, mode === 'static' can be optionally configured, other modes must be configured // fileName: export fileName // query: query parameter // pageData: // sortData: sortData // selectedList: currently selected data // tableData: currently selected data handler: (fileName, query, pageData, sortData, selectedList, tableData) => { // mode === 'static': The handler function returns a two-dimensional array, // return [["title", "content", "createData"],["typescript", "this is typescript", "2015-01-01"]] // mode === 'blob': The handler function needs to return the promise of resolve(blob). // 1. return new Promise(resolve => {resolve(blob)}); // 2. return new Promise(resolve => {resolve({data: blob})}); // mode === 'url': the handler function needs to return the URL or the promise of resolve(url). Return 'xxx.xxx.com/xxx.xls'; // 2. return new Promise(resolve => {resolve('xxx.xxx.com/xxx.xls')}) } }, // ... Other configuration items}Copy the code

Support for copying cell contentAPI

tableOption: { useCellFocus: true, // ... Other configuration items}Copy the code

Print current pageAPI

tableOption: { supportPrint: true. // ... Other configuration items}Copy the code

Row data can be moved up and downAPI

TableOption: {supportMoveRow: true, moveRowConfig: {// Specifies the field to be updated after moving. If this field is not configured, only DOM will be updated. Key: 'priority', // Single column movement mode: UseSingleMode: true generates a single column useSingleMode: false, // Column fixed: only in single-column movement mode, if there is a fixed column to the right, the column must be set to left fixed: Handler: (list, tableData) => {console.log(list, tableData); }}, / /... Other configuration items}Copy the code

On the framework

Unfortunately, I’m using the React framework. Surprisingly, GridManager has gridManager-vue, gridManager-react, and GridManager-angular-1.x.

Even if the current project is an ancient one, you can use the native js version of gridmanager that supports jQuery directly.

In addition

This is only part of the GridManager functionality, in addition to fixed table headers, fixed columns, internationalization, table header filtering, and other common table functionality.

Click star for gridmanager if you like.