Boost Your Admin UI with DripTable: A Low‑Code React Table Solution

Introduction

DripTable is an open‑source dynamic list solution released by JD Retail, built on React and JSON Schema. It enables rapid generation of backend admin tables through simple configuration, reducing development effort and improving efficiency.

Components

drip-table : the core library that renders data conforming to the JSON Schema standard.

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 tables automatically from simple JSON Schema definitions.

Dynamic Extensibility : supports custom component development via APIs.

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

When to Use

Quickly building CMS list pages for middle‑back office systems without hard‑coding.

Low‑code table prototyping and implementation where complex front‑end code is unnecessary.

Getting Started

DripTable has two usage scenarios: the configuration side (visual JSON Schema generation) and the application side (rendering the dynamic list).

Configuration Side

1. Install Dependencies

<code>yarn add drip-table-generator</code>

<code>npm install --save drip-table-generator</code>

2. Import the Library

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

3. Use in a Component

<code>return <DripTableGenerator />;</code>

Resulting configuration UI is shown below:

Application Side

1. Install Dependencies

<code>yarn add drip-table</code>

<code>npm install --save drip-table</code>

2. Import the Library

<code>// Import drip-table
import DripTable from "drip-table";
import "drip-table/dist/index.min.css";</code>

3. Define Schema and Render

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

The rendered table appears as follows:

Open‑Source Repository

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