Post - CustomGrid: Flexible Tabular Data Component for React/SharePoint Systems

Task

It was necessary to standardize the display of tabular data within the system. Since the system is large, special emphasis was placed on flexibility.

Implementation

The foundation of all development uses Kendo UI, specifically Kendo Grid for the grid base. The main idea: pass fields with meta-information, data corresponding to these fields, and, depending on the type of pagination (client or server), a method for loading the next batch of data with the set pagination. The task was accomplished. The grid turned out to be flexible and configurable.

Key Features:

• This particular implementation is close to server data structures, which saves time when connecting the component. If something does not fit (for example, the method for getting the key of an item in the data set), it can be easily overridden.
• 2 operating modes: server and client. Plus, a not fully-fledged combined mode, in which the client data set is added to the one returned from the server. In server mode, the quantitative indicators of elements in the grid come from the server, and the grid itself orchestrates data loading. A loading method is passed to it, and it, in turn, inserts pagination for the next batch and navigates accordingly. In client mode, data is sorted by the kendo grid itself using dataQuery objects.
• Sorting and filtering also work in both modes by passing callback functions.
• Advanced filtering and column hiding menu
• Advanced status and filtering menu
• Support for status bars (special column)
• Support for custom cell renders (custom cell display) with passing of essential methods such as click (for compatibility). In addition to manual assignment in each unique case, it is possible to assign rendering hierarchically by:
  • field name
  • field type
  • function signature
• Customized support for edit mode, standard tools are adapted to server structures
• Helper structures are organized for automatic conversion of data received from the server to JS types. Everything happens automatically via mappings.

Typing the props of a grid component, which can reveal quite a lot about it.

The Component

(Note: not the final version)

Functions for preprocessing: mapping server fields to columns and converting data to JavaScript types.