Introducing DripTable: An Efficient Open‑Source Enterprise‑Level Table Visualization Solution

DripTable is an open‑source, enterprise‑grade table visualization solution released by JD.com, built on React and JSON Schema to enable fast, low‑code creation of dynamic list pages.

The project consists of two sub‑modules: drip-table , the core library that renders data according to JSON Schema, and drip-table-generator , a visual tool for generating the schema configuration.

Advantages include high development efficiency, configuration‑driven rendering, dynamic extensibility through custom components, and flexible UI theming.

When to use DripTable: for rapid construction of backend CMS list pages and low‑code table previews without hard‑coding.

Getting started – Configuration side

Install the generator:

yarn add drip-table-generator

npm install --save drip-table-generator

Import and render:

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

Getting started – Application side

Install the core library:

yarn add drip-table

npm install --save drip-table

Import the library and its styles, then define a JSON Schema and render the table:

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

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

return (
);

The open‑source repository is available at https://github.com/JDFED/drip-table .