Boost Your Admin UI with DripTable: A High‑Performance React Table Builder

Today we recommend DripTable, an open‑source, high‑performance enterprise‑grade table visualization solution from JD.com.

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

It consists of two sub‑projects:

drip-table : the core library that supports automatic rendering of data conforming to the JSON Schema standard.

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

Advantages

Efficient Development : Low‑code approach accelerates front‑end list development.

Configurable Rendering : Simple JSON Schema field configuration automatically renders the required list, lowering user cost.

Dynamic Extensibility : Supports custom component development via API for custom cell components.

UI Framework Freedom : Supports multiple theme packages and custom themes.

When to Use

Rapid construction of CMS list pages in back‑office systems using simple JSON Schema data without hard coding.

Low‑code table building and preview in front‑end 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 a page

return <DripTableGenerator />;

Resulting 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 "drip-table/dist/index.min.css";

3. Define schema and render

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

Resulting rendering:

Open‑Source Repository

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