DripTable: An Open‑Source, High‑Performance Enterprise Table Solution for React

Today we recommend DripTable, an open‑source, high‑efficiency enterprise table visualization solution released by JD.com.

DripTable is a dynamic list solution for middle‑back office applications, built on React and JSON Schema, enabling rapid generation of list pages through simple configuration, reducing development effort and improving efficiency.

Sub‑projects

drip-table : the core library that automatically renders list content according to 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 definitions.

Dynamic Extensibility : supports custom component development via APIs.

Flexible UI Framework : compatible with multiple theme packages and custom themes.

When to Use

Ideal for quickly building CMS list pages in middle‑back office systems using only JSON Schema data, without hard‑coding.

Suitable for low‑code list construction where front‑end code is minimal yet custom functionality is required.

Getting Started

Configuration Side

1. Install Dependencies

Using Yarn:

yarn add drip-table-generator

Using npm:

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
;

The configuration side renders as shown below:

Application Side

1. Install Dependencies

Using Yarn:

yarn add drip-table

Using npm:

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. Use in Page

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

GitHub: github.com/JDFED/drip-table