Boost Enterprise UI with DripTable: A Low‑Code Dynamic List Solution

DripTable is a dynamic list solution launched by JD Retail for enterprise‑level backend applications, built on React and JSON Schema, aiming to simplify list development and improve efficiency through simple configuration.

The project includes two sub‑projects:

drip-table : the core library that automatically renders list content based on JSON Schema data.

drip-table-generator : a visual tool for generating JSON Schema configuration data.

Advantages

Efficient Development : accelerates front‑end list development with a low‑code approach.

Configurable Rendering : renders lists automatically from simple JSON Schema field configurations.

Dynamic Extensibility : supports custom component development and API‑driven cell components.

UI Framework Freedom : offers multiple theme packages and custom theme support.

When to Use

Rapidly build CMS list pages for middle‑back office systems using only JSON Schema data, without hard‑coding.

Implement low‑code list construction and preview in front‑end tables without complex code.

Getting Started

DripTable has two usage scenarios: the configuration side and the application side.

Configuration Side

1 Install Dependencies

yarn add drip-table-generator

npm install --save drip-table-generator

2 Import Dependencies

import DripTableGenerator from "drip-table-generator";
import "drip-table-generator/dist/index.min.css";

3 Use in Page

return <DripTableGenerator />;

Resulting configuration side rendering:

Application Side

1 Install Dependencies

yarn add drip-table

npm install --save drip-table

2 Import Dependencies

// Import drip-table
import DripTable from "drip-table";
// Import styles
import "drip-table/dist/index.min.css";

3 Render Table

const schema = {
  size: "middle",
  columns: [
    {
      key: "columnKey",
      title: "列标题",
      dataIndex: "dataIndexName",
      component: "text",
      options: { mode: "single" }
    }
  ]
};
return (
  <DripTable
    schema={schema}
    dataSource={[]}
  />
);

Resulting application side rendering:

Open‑Source Repository

https://github.com/JDFED/drip-table