This action will force synchronization from 京东零售/drip-table, which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
English | 简体中文 | Documentation | Discussions|Gitter
Drip table
is a dynamic list solution for enterprise level middle and background launched by JD retail. The project is based on React
and JSON Schema
. It aims to reduce the difficulty of developing CMS
page list and improve work efficiency by simple configuration
to quickly generate page dynamic list.
Drip table
contains serval sub projects: drip-table
, drip-table-generator
, drip-table-driver-antd
.
The introduction of each sub-project are as follows:
drip-table
: the core library of the solution for building dynamic tables. It's main ability is to render a dynamic table automatically when received data which conforms to the JSON Schema
standard.
drip-table-generator
: a visual tool for producing configuration data that meets the JSON Schema
standard in order to sent to DripTable
for rendering a table and columns.
drip-table-driver-antd
: a theme package which is composed of Ant Design
components and icons.
Drip table
is divided into two application scenarios: configuration end and application end. The configuration side is mainly responsible for generating JSON Schema
standard data through visualization and low-code
. The function of the application side is to render the JSON Schema
standard configuration data into a dynamic list.
Install dependencies
The configuration side depend on the application side, please make sure that drip-table
and drip-table-driver-{drivername}
are installed before installing dependencies.
yarn
yarn add drip-table-generator
npm
npm install --save drip-table-generator
Import at the entrance of a file
import DripTableGenerator from "drip-table-generator";
import "drip-table-generator/dist/index.css";
Use components in pages
return <DripTableGenerator />;
Then the configuration side can be rendered normally, as the sample screenshot below:
Install dependencies
Install the drip-table
and a drip-table
theme package at the same time:
yarn
yarn add drip-table drip-table-driver-{drivername}
npm
npm install --save drip-table drip-table-driver-{drivername}
Theme packages below are available:
Import at the entrance of a file
// import drip-table
import DripTable from "drip-table";
// import a theme package, take antd as an example
import DripTableDriverAntDesign from "drip-table-driver-antd";
// import ant-design css
import "antd/dist/antd.css";
// import drip-table css
import "drip-table/dist/index.css";
Use components in pages
const schema = {
$schema: "http://json-schema.org/draft/2019-09/schema#",
configs: {
size: "middle",
},
columns: [
{
$id: "id",
title: "My Title",
"ui:type": "text",
"ui:props": { mode: "single" },
type: "string",
dataIndex: "dataIndexName",
},
],
};
return (
<DripTable
driver={DripTableDriverAntDesign}
schema={schema}
dataSource={[]}
/>
);
Then the application side can be rendered normally, as the sample screenshot below:
If you're interested in this project, you're welcome to create ✨issue. We are appreciated for your ❤️star.
Clone
git clone https://github.com/JDFED/drip-table.git
Install dependencies
lerna bootstrap
Run project
yarn start
drip-table
demo page: /drip-table/guide/basic-demodrip-table-generator
demo page: /drip-table-generator/previewFor more commands, see DEVELOP . Please visit the official website address drip-table 。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。