Home

Awesome

<a href='http://drip-table.jd.com/'> <h1 style="display: flex; align-items: center; justify-content: center"> <img src='https://storage.360buyimg.com/imgtools/7e0e546a96-d962c880-f9a2-11eb-bf08-d585041b7c80.svg'/> <span style="margin-left: 10px">Drip Table</span> </h1> </a>

English | 简体中文 | Documentation | DiscussionsGitter | Official Wechat group

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --> <!-- ALL-CONTRIBUTORS-BADGE:END -->

GitHub license npm version node yarn document PRs Welcome All Contributors

📖 Introduction

Drip Tableis 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.

Drip Table contains serval sub projects: drip-table, drip-table-generator.

The introduction of each sub-project are as follows:

Features

⬆️ 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 table.

The configuration side

  1. Install dependencies

    The configuration side depend on the application side, please make sure that drip-table has been installed before installing dependencies.

    yarn

    yarn add drip-table-generator
    

    npm

    npm install --save drip-table-generator
    
  2. Import at the entrance of a file

    import DripTableGenerator from "drip-table-generator";
    import "drip-table-generator/dist/index.min.css";
    
  3. Use components in pages

    return <DripTableGenerator />;
    

    Then the configuration side can be rendered normally, as the sample screenshot below:

    drip-table-generator

The application side

  1. Install dependencies

    Install the drip-table:

    yarn

    yarn add drip-table
    

    npm

    npm install --save drip-table
    
  2. Import at the entrance of a file

    // import drip-table
    import DripTable from "drip-table";
    // import drip-table css
    import "drip-table/dist/index.min.css";
    
  3. Use components in pages

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

    Then the application side can be rendered normally, as the sample screenshot below:

    drip-table-demo

🤝 Contribution

If you're interested in this project, you're welcome to create ✨issue. We are appreciated for your ❤️star.

development

  1. Clone

    git clone https://github.com/JDFED/drip-table.git
    
  2. Install dependencies

    lerna bootstrap
    
  3. build independecies

    yarn

    yarn run build
    

    npm

    npm run build
    
  4. Run project

    yarn start
    

For more commands, see DEVELOP . Please visit the official website address drip-table

Communication

Official Wechat group

License

MIT License