Hello everyone, I am Xiao Hui.
Today I recommend an open source and efficient enterprise-level table visualization construction solution from JD.com: DripTable !
DripTable is a dynamic list solution launched by JD Retail for enterprise-level mid-backend. The project is based on React and JSON Schema. It aims to quickly generate page dynamic lists through simple configuration to reduce the difficulty of list development and improve work efficiency.
DripTable currently contains the following subprojects: drip-table, drip-table-generator.
The details of each sub-project are as follows:
drip-table : The core library of the dynamic list solution, its main capability is to support automatic rendering of list content for data that conforms to the JSON Schema standard.
drip-table-generator : A visual generator for DripTable configuration JSON Schema standard configuration data.
Advantage
Efficient development : Improve the efficiency of front-end list development and realize the rapid development of list pages in Lowcode mode.
Configurable rendering : configure fields with a simple JSON Schema, automatically render the required list, and reduce user costs.
Dynamically scalable : Support custom component development, quickly generate custom or cell components that implement business functions through API.
Interface framework freedom : the table interface framework supports a variety of theme packages, and also supports custom theme packages.
when to use
It is used for quick construction of middle and background CMS list pages, and lists can be generated through simple JSON Schema data without hard coding.
Front-end Table preview and implementation for Lowcode list construction, without complex front-end code, you can implement a custom list.
start using
DripTable is divided into two application scenarios: configuration side and application side. The configuration side is mainly responsible for generating JSON Schema standard data through visualization and low-code methods. The function of the application side is to render the JSON Schema standard configuration data into a dynamic list.
Recommend an open source and free Spring Boot practical project:
https://github.com/javastacks/spring-boot-best-practice
configuration side
1 Installation dependencies
The configuration side depends on the application side, so make sure that drip-table is installed before installation.
「yarn」
yarn add drip-table-generator「npm」
npm install --save drip-table-generator2 Introduce dependencies at the beginning of the file
import DripTableGenerator from "drip-table-generator";
import "drip-table-generator/dist/index.min.css";3 References in the page
return <DripTableGenerator />;The normal rendering effect of the configuration side is as follows:
Application side
1 Installation dependencies
Install drip-table:
「yarn」
yarn add drip-table「npm」
npm install --save drip-table2 Introduce dependencies at the beginning of the file
// 引入 drip-table
import DripTable from "drip-table";
// 引入 drip-table 样式
import "drip-table/dist/index.min.css";3 quotes
const schema = {
size: "middle",
columns: [
{
key: "columnKey",
title: "列标题",
dataIndex: "dataIndexName",
component: "text",
options: {
mode: "single",
},
},
],
};
return (
<DripTable
schema={schema}
dataSource={[]}
/>
);The normal rendering effect on the application side is as follows:
Open source address: https://github.com/JDFED/drip-table
——End——
Finally, everyone is welcome to receive coupons and join Xiaohui's Knowledge Planet Programmer Academy . There are many technical experts sharing technology and workplace experience with you:
