[React] Automatic data table component--bodegrid

Tables are one of the most frequently used components in a back-office management system, and the related features include data additions and edits, queries, sorting, paging, custom displays, and some action buttons. We explore and introduce my design ideas in detail: New and editedThink about the first thing we wrote about how the new edit page was done, whether a page was written on a page, and then either the form was submitted or the Ajax was submitted. There are countless new and edited view pages in the background, and now it's scary to think about it and look tired. I was excited to see that the grid component behind the Kendoui was able to automatically complete the new and editing functions by simply configuring the properties of the column and saving the address. Unfortunately, I've looked all over the react all the component libraries and found no such component, but I did it myself. Design ideas:

1, set the type of each column, such as text, numbers, pictures, time, bool value, drop-down selection box and so on.

2. Provide different operation components for different types, such as input component of text, file component of picture. This will generate the corresponding form based on the column and its type when adding and editing.

3, save the user input, submit to the configured URL address. querying, sorting, pagingquery, sorting and paging almost every table page must function, the implementation of a variety of ways, here is the table universal query and sorting design ideas: 1, each column can be queried should be configurable. 2, for different data type query conditions should be differentiated, such as text has "contains" the condition, the number has "greater than" condition. 3, the back end of the processing should be unified, for each query condition to write query logic is very thankless work. 4, each column can be ordered can be configured, sorted by the positive and reverse order. The request body of the final table is designed as follows:

 
{ "pageIndex":1, "pageSize":15, "sortConditions":[
        { "sortField":"name", "listSortDirection":1 }
    ], "filterGroup":{ "rules":[
            { "field":"displayName", "operate":"contains", "value":"a" }
        ]
    }
}

The whole component of the source code is still relatively complex, here is not in-depth, interested students can view React-demo in the Bode-grid.js source code, address: Https://github.com/liuxx001/react-demo.git But it is very simple to use, as follows:

getInitialState: function () {
     let gridOptions = {
         ref: this,
         title: "List of Roles",
         url: {
             read: ApiPrefix + "zero / role / GetRolePagedList",
             add: ApiPrefix + "zero / role / CreateRole",
             edit: ApiPrefix + "zero / role / UpdateRole",
             delete: ApiPrefix + "zero / role / DeleteRole"
         },
         columns: [
             {title: "role name", data: "name", type: "text", editor: {}, query: true},
             {title: "display name", data: "displayName", type: "text", editor: {}, query: true},
             {title: "is static role", data: "isStatic", type: "switch", editor: {}, query: true},
             {title: "is the default role", data: "isDefault", type: "switch", editor: {}, query: true},
             {title: "Action options", type: "command", actions: [{name: "Set permissions", onClick: showPermissionModel}]}
         ]
     };
     return {
         gridOptions: gridOptions
     };
} 

Very few code can fully realize the table display, add, edit, sort, query, paging and other functions, display the effect: Bodegrid Table API:

Parameters	Type	Description	Default value
Ref	Object	Ref points to itself, for inline button binding data	Ref:this, fixed notation
Title	String	Table title
Url	Object	Remote API Interface Configuration
Columns	Array[object]	Table Column Property Configuration
Actions	Array[object]	Customize button in upper right corner of table
PageSize	Number	Display quantity per page	15
Pagesizeoptions	Array[string]	Selectable Display Quantity	["10", "15", "20", "30", "50", "100"]
SortField	String	Initial sort Field	First column
SortDirection	String	Initial sort mode	Desc

The columns properties are described in detail:

Parameters	Type	Description	Default value
Title	String	Table Header Display Title
Data	String	Get the corresponding field name from the data source
Type	String	The type of the column. Types are: text, textarea, number, switch, Dropdown, IMG, DatePicker, DateTimePicker, Timepicker, hide, command
Query	Boolean	Whether you can query	False
Render	function (V,D)	The column renders the event. V: Data at the forefront; D: Data for the current row
Sortdisable	Boolean	Whether to prohibit sorting	False
Source	Array[object]	Dropdown Type drop-down data source, format: [{value: ' xx ', text: ' VV '}], when type= "dropdown" must be
Actions	Array[object]	Command type Custom action options, format: [{name: ' xx ', onclick:function (data) {}}]. Data: Current row

[React] Automatic data table component--bodegrid