Build Dynamic Enterprise Tables Fast with DripTable – A Low‑Code React Solution

Overview

DripTable is an open‑source, enterprise‑grade table visualization solution from JD.com. Built on React and JSON Schema, it renders dynamic list pages from a declarative schema, eliminating hard‑coded table implementations.

Sub‑projects

drip-table : Core library that automatically renders list content according to the JSON Schema standard.

drip-table-generator : Visual tool for generating JSON‑Schema configuration data for DripTable.

Advantages

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

Configurable rendering : Simple JSON Schema fields produce the required table, reducing developer effort.

Dynamic extensibility : Custom cell components can be injected via the API.

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

Typical Use Cases

Rapid construction of CMS list pages in middle‑back office systems using only JSON Schema data.

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

Getting Started

DripTable consists of two usage scenarios: a configuration side (visual generator) and an application side (runtime rendering). The configuration side depends on the core library, so install the core first.

Configuration side (drip-table-generator)

Install the generator package:

yarn add drip-table-generator

npm install --save drip-table-generator

Import the library and its styles:

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

Render the generator component in a React tree:

return <DripTableGenerator />;

Application side (drip-table)

Install the core library:

yarn add drip-table

npm install --save drip-table

Import the core library and its styles:

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

Define a JSON Schema and render the table:

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

Open‑Source Repository

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