A tiny and powerful enterprise-class solution for building tables,based on React and JSON

Introduction

DripTable is a solution, launched by JD Retail, for building dynamic tables in mid-and-back end webapp. This project based on React and JSON Schema standard, and is aimed to reduce the difficulty of developing dynamic tables in CMS and improve working efficiency by means of quickly generating dynamic tables in data-driven way.

DripTable contains serval sub projects: drip-table, drip-table-generator, drip-table-driver-antd.

The introduction of each sub-project are as follows:

• drip-table: the core library of the solution for building dynamic tables. It’s main ability is to render a dynamic table automatically when received data which conforms to the JSON Schema standard.

• drip-table-generator: a visual tool for producing configuration data that meets the JSON Schema standard in order to sent to DripTable for rendering a table and columns.

• drip-table-driver-antd: a theme package which is composed of antd components and icons.

Problems can be solved

1. Solve the problem that complicated tables are difficult to add new features and manage existed codes.
2. Optimize the process of development that there’s no need to involve development and release for each change.
3. Lower the barriers to communication between developers and product managers who built and previewed table to meet requirements by using the visual tool.
4. Solve the problem that the existing visual tools cannot set columns and customize contents of cells of a table.

Advantages

1. Efficient: Simplify the process of developing a table and develop columns of a table in a LowCode way;
2. Configurable: Change tables in simple way by modifying the configuration data that meets the JSON Schema standard;
3. Visualization: Produce configurations that meet the JSON Schema standard by dragging and dropping components simply with the visual tool.
4. Free UI framework: Serval theme packages can be used, and custom theme packages are also supported.

Getting Start

DripTable can be divided into two scenes: configuration side and application side. The configuration side is mainly responsible for producing data that meet the JSON Schema standard in visual and LowCode ways. The application side is used to render a table from data configurations.

The application side

1. Install dependencies

   Install the drip-table and a drip-table theme package at the same time:

   yarn

   yarn add drip-table drip-table-driver-{drivername}

   npm

   npm install --save drip-table drip-table-driver-{drivername}

   Theme packages below are available:

   • drip-table-driver-antd

2. Import at the entrance of a file

   // import drip-table
   import DripTable from 'drip-table';
   // import a theme package, take antd as an example
   import DripTableDriverAntDesign from 'drip-table-driver-antd';
   // import ant-design css
   import 'antd/dist/antd.css';
   // import drip-table css
   import 'drip-table/index.css';

3. Use components in pages

   const schema = {
     "$schema": "http://json-schema.org/draft/2019-09/schema#",
     configs: {
       size: 'middle',
     },
     columns: [
       {
         "$id": "id",
         title: 'My Title',
         'ui:type': 'text',
         'ui:props': { mode: 'single' },
         type: 'string',
         dataIndex: 'dataIndexName',
       }
     ]
   };
   return (
     <DripTable driver={DripTableDriverAntDesign} schema={schema} dataSource={[]} />
   );

   Then the application side can be rendered normally, as the sample screenshot below:

   

The configuration side

1. Install dependencies

   The configuration side depend on the application side, please make sure that drip-table and drip-table-driver-{drivername} are installed before installing dependencies.

   yarn

   yarn add drip-table-generator

   npm

   npm install --save drip-table-generator

2. Import at the entrance of a file

   import DripTableGenerator from 'drip-table-generator';
   import 'drip-table-generator/index.css';

3. Use components in pages

   return <DripTableGenerator />

   Then the configuration side can be rendered normally, as the sample screenshot below:

   

Contribution

If you’re interested in this project, you’re welcome to create pull requests. We are appreciated for your star.

development

1. Clone

2. Install dependencies

   lerna bootstrap

3. Run project

   yarn start

   • visit http://localhost:8000
   • drip-table demo page: /drip-table/guide/basic-demo
   • drip-table-generator demo page: /drip-table-generator/preview

For more commands, see DEVELOP .

License

MIT License