Introducing DripTable: An Efficient Enterprise‑Level Visual Table Builder for React

Today we recommend a high‑efficiency, enterprise‑grade visual table building solution released by JD.com: DripTable .

DripTable is a dynamic list solution for enterprise middle‑and‑back‑office applications, built on React and JSON Schema, designed to quickly generate dynamic list pages through simple configuration, reducing development difficulty and improving efficiency.

DripTable consists of two sub‑projects: drip-table (the core library that renders lists based on JSON Schema) and drip-table-generator (a visual tool for generating JSON Schema configuration data).

Advantages

High development efficiency : Accelerates front‑end list development with low‑code rapid development.

Configurable rendering : Automatically renders required tables from simple JSON Schema field configurations.

Dynamic extensibility : Supports custom component development and API‑driven custom cell components.

Flexible UI framework : Supports multiple theme packages and custom themes.

When to Use

Quickly build CMS list pages for middle‑and‑back‑office systems using JSON Schema without hard‑coding.

Low‑code front‑end table preview and implementation, enabling custom lists without complex code.

Getting Started

DripTable has two usage scenarios: the configuration side and the application side. The configuration side provides a visual, low‑code interface to generate JSON Schema data, while the application side renders the JSON Schema into dynamic tables.

Configuration Side

1. Install dependencies

yarn add drip-table-generator

npm install --save drip-table-generator

2. Import dependencies at the top of the file

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

3. Use in a component

return <DripTableGenerator />;

The configuration side renders as shown below:

Application Side

1. Install dependencies

yarn add drip-table

npm install --save drip-table

2. Import dependencies at the top of the file

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

3. Use in a component

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

The application side renders as shown below:

Open‑source repository: https://github.com/JDFED/drip-table