{"id":13594535,"url":"https://github.com/jd-opensource/drip-table","last_synced_at":"2025-05-15T14:07:39.639Z","repository":{"id":36951801,"uuid":"435742357","full_name":"jd-opensource/drip-table","owner":"jd-opensource","description":"A tiny and powerful enterprise-class solution for building lowcode tables. 轻量、强大的企业级表格可视化搭建解决方案。","archived":false,"fork":false,"pushed_at":"2025-02-21T09:51:42.000Z","size":4696,"stargazers_count":1580,"open_issues_count":62,"forks_count":137,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-05-11T10:52:38.024Z","etag":null,"topics":["generator","lowcode","react","render","table"],"latest_commit_sha":null,"homepage":"https://drip-table.jd.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jd-opensource.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-12-07T04:29:12.000Z","updated_at":"2025-05-10T12:52:22.000Z","dependencies_parsed_at":"2023-02-10T09:01:31.236Z","dependency_job_id":"db329ed6-8cfd-4172-878d-ca60fb89d152","html_url":"https://github.com/jd-opensource/drip-table","commit_stats":null,"previous_names":["jd-opensource/drip-table","jdfed/drip-table"],"tags_count":121,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jd-opensource%2Fdrip-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jd-opensource%2Fdrip-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jd-opensource%2Fdrip-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jd-opensource%2Fdrip-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jd-opensource","download_url":"https://codeload.github.com/jd-opensource/drip-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254355335,"owners_count":22057354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["generator","lowcode","react","render","table"],"created_at":"2024-08-01T16:01:35.226Z","updated_at":"2025-05-15T14:07:34.605Z","avatar_url":"https://github.com/jd-opensource.png","language":"TypeScript","readme":"\u003ca href='http://drip-table.jd.com/'\u003e\n  \u003ch1 style=\"display: flex; align-items: center; justify-content: center\"\u003e\n    \u003cimg src='https://storage.360buyimg.com/imgtools/7e0e546a96-d962c880-f9a2-11eb-bf08-d585041b7c80.svg'/\u003e\n    \u003cspan style=\"margin-left: 10px\"\u003eDrip Table\u003c/span\u003e\n  \u003c/h1\u003e\n\u003c/a\u003e\n\nEnglish | [简体中文](./README.zh-CN.md) | [Documentation](http://drip-table.jd.com/) | [Discussions](https://github.com/JDFED/drip-table/discussions)｜[Gitter](https://gitter.im/drip-table/community) | [Official Wechat group](./Contact.md)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n\n[contributors]: https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square \"Number of contributors on All-Contributors\"\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)\n[![npm version](https://img.shields.io/npm/v/drip-table.svg?style=flat)](https://www.npmjs.com/package/drip-table)\n![node](https://img.shields.io/badge/node-%3E%3D13.14.0-blue.svg)\n![yarn](https://img.shields.io/badge/yarn-%3E%3D1.0.0-blue.svg)\n![document](https://img.shields.io/badge/documentation-yes-brightgreen.svg)\n![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)\n[![All Contributors][contributors]](./CONTRIBUTORS.md)\n\n## 📖 Introduction\n\n`Drip Table`is a dynamic table 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 table and improve work efficiency by `simple configuration` to quickly generate page dynamic table.\n\n`Drip Table` contains serval sub projects: `drip-table`, `drip-table-generator`.\n\nThe introduction of each sub-project are as follows:\n\n- `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.\n\n- `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.\n\n## Features\n\n* [x] Basic table\n* [x] Compound table\n* [x] Toolbar\n* [x] Renderer\n* [x] Text component\n* [x] Number component\n* [x] Image component\n* [x] Link component\n* [x] Tag component\n* [x] Button component\n* [x] Select component\n* [x] DataPicker component\n* [x] PopUpPage component\n* [x] RichText component\n* [x] Group component\n* [x] Custom component\n* [x] Header slot\n* [x] Footer slot\n* [x] Pagination\n* [x] Virtual list\n* [x] Sticky\n* [x] Sub table\n* [x] Row selection\n* [x] Row draggable\n* [x] Fixed column\n* [x] Show/Hide column\n* [x] Edit data\n* [x] Stripe\n* [x] Table with border\n* [x] Column resizing\n* [x] Size\n* [x] Global styles\n* [x] Empty table prompt\n* [x] Loading\n* [x] Card layout\n* [x] Filter\n\n## ⬆️ Getting Start\n\n`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 table.\n\n### The configuration side\n\n1. Install dependencies\n\n   The configuration side depend on the application side, please make sure that `drip-table` has been installed before installing dependencies.\n\n   \u003e yarn\n\n   ```sh\n   yarn add drip-table-generator\n   ```\n\n   \u003e npm\n\n   ```sh\n   npm install --save drip-table-generator\n   ```\n\n2. Import at the entrance of a file\n\n   ```js | pure\n   import DripTableGenerator from \"drip-table-generator\";\n   import \"drip-table-generator/dist/index.min.css\";\n   ```\n\n3. Use components in pages\n\n   ```js | pure\n   return \u003cDripTableGenerator /\u003e;\n   ```\n\n   Then the configuration side can be rendered normally, as the sample screenshot below:\n\n   ![drip-table-generator](https://img10.360buyimg.com/imagetools/jfs/t1/83544/7/17486/359800/63620e25Ed7185bc1/caf5173d381cb4c0.png)\n\n### The application side\n\n1. Install dependencies\n\n   Install the `drip-table`:\n\n   \u003e yarn\n\n   ```sh\n   yarn add drip-table\n   ```\n\n   \u003e npm\n\n   ```sh\n   npm install --save drip-table\n   ```\n\n2. Import at the entrance of a file\n\n   ```js\n   // import drip-table\n   import DripTable from \"drip-table\";\n   // import drip-table css\n   import \"drip-table/dist/index.min.css\";\n   ```\n\n3. Use components in pages\n\n   ```js\n   const schema = {\n     size: \"middle\",\n     columns: [\n       {\n         key: \"columnKey\",\n         title: \"Column Title\",\n         dataIndex: \"dataIndexName\",\n         component: \"text\",\n         options: {\n           mode: \"single\",\n         },\n       },\n     ],\n   };\n   return (\n     \u003cDripTable\n       schema={schema}\n       dataSource={[]}\n     /\u003e\n   );\n   ```\n\n   Then the application side can be rendered normally, as the sample screenshot below:\n\n   ![drip-table-demo](https://img13.360buyimg.com/imagetools/jfs/t1/136130/29/29966/659037/6363944fEd6a71fa1/2bec620460de4f3c.png)\n\n## 🤝 Contribution\n\nIf 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).\n\n### development\n\n1. Clone\n\n   ```sh\n   git clone https://github.com/JDFED/drip-table.git\n   ```\n\n2. Install dependencies\n\n   ```sh\n   lerna bootstrap\n   ```\n\n3. build independecies\n\n   \u003e yarn\n\n   ```sh\n   yarn run build\n   ```\n\n   \u003e npm\n\n   ```sh\n   npm run build\n   ```\n\n4. Run project\n\n   ```sh\n   yarn start\n   ```\n\n- visit http://localhost:8000\n- `drip-table` demo page: /drip-table/guide/basic-demo\n- `drip-table-generator` demo page: /drip-table-generator/demo\n\nFor more commands, see [DEVELOP](./DEVELOP.md) .\nPlease visit the official website address [drip-table](http://drip-table.jd.com/) 。\n\n## Communication\n\n[Official Wechat group](./Contact.md)\n\n## License\n\n[MIT License](./LICENSE)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjd-opensource%2Fdrip-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjd-opensource%2Fdrip-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjd-opensource%2Fdrip-table/lists"}