Drip Table
English | [įŽäŊä¸æ](./README.zh-CN.md) | [Documentation](http://drip-table.jd.com/) | [Discussions](https://github.com/JDFED/drip-table/discussions)
[contributors]: https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square "Number of contributors on All-Contributors"
[](./LICENSE)
[](https://www.npmjs.com/package/drip-table)
[![All Contributors][contributors]](./CONTRIBUTORS.md)
## đ Introduction
`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.
## âŦī¸ Getting Start
`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.
### The configuration side
1. 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
```sh
yarn add drip-table-generator
```
> npm
```sh
npm install --save drip-table-generator
```
2. Import at the entrance of a file
```js
import DripTableGenerator from "drip-table-generator";
import "drip-table-generator/dist/index.css";
```
3. Use components in pages
```js
return ;
```
Then the configuration side can be rendered normally, as the sample screenshot below:
### The application side
1. Install dependencies
Install the `drip-table` and a `drip-table` theme package at the same time:
> yarn
```sh
yarn add drip-table drip-table-driver-{drivername}
```
> npm
```sh
npm install --save drip-table drip-table-driver-{drivername}
```
Theme packages below are available:
- drip-table-driver-antd
2. Import at the entrance of a file
```js
// 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";
```
3. Use components in pages
```js
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 (
);
```
Then the application side can be rendered normally, as the sample screenshot below:
## đ¤ Contribution
If you're interested in this project, you're welcome to create â¨[issue](https://github.com/JDFED/drip-table/issues). We are appreciated for your â¤ī¸[star](https://github.com/JDFED/drip-table).
### development
1. Clone
```sh
git clone https://github.com/JDFED/drip-table.git
```
2. Install dependencies
```sh
lerna bootstrap
```
3. Run project
```sh
yarn start
```
- visit http://localhost:8000
- `drip-table` demo page: /drip-table/guide/basic-demo
- `drip-table-generator` demo page: /drip-table-generator/preview
For more commands, see [DEVELOP](./DEVELOP.md) .
Please visit the official website address [drip-table](http://drip-table.jd.com/) ã
## License
[MIT License](./LICENSE)