京东开源出品：轻量、强大的【列表可视化搭建】解决方案！

Node >= 10.14.0
React >= 16.9.0

npm install --save drip-table

import React from 'react';
import DripTable from 'drip-table';
import 'drip-table/dist/index.min.css';

export default Demo = () => {
  return (
    <DripTable
      schema={schema}
      dataSource={dataSource}
    />
  );
};

const schema = {
  size: "middle",
  pagination: {
    pageSize: 10,
    position: "bottomRight",
  },
  columns: [
    {
      key: "mock_1",
      title: "商品名称",
      dataIndex: "name",
      component: "text",
      options: {
        mode: "single",
        maxRow: 1,
      },
    },
    {
      key: "mock_2",
      title: "商品详情",
      align: "center",
      dataIndex: "description",
      component: "text",
      options: {
        mode: "single",
        ellipsis: true,
        maxRow: 1,
      },
    },
    {
      key: "mock_3",
      title: "库存状态",
      dataIndex: "status",
      description: "这是一条提示信息",
      component: "text",
      options: {
        mode: "single",
        i18n: {
          onSale: '售卖中',
          soldOut: '已售罄',
        },
      },
    },
    {
      key: "mock_4",
      title: "商品价格",
      width: 80,
      dataIndex: "price",
      component: "text",
      options: {
        mode: "single",
        prefix: "￥",
      },
    },
    {
      key: "mock_5",
      title: "操作",
      width: 118,
      dataIndex: "operate",
      component: "link",
      options: {
        mode: "multiple",
        operates: [
          { name: "order", label: "预定", href: "./#order", target: "_blank" },
          { name: "view", label: "查看", href: "./#view" },
          { name: "remove", label: "删除", href: "./#remove" },
        ],
      },
    },
  ],
};

// 这是表格的数据
const dataSource = [
  {
    id: 1,
    name: "商品一",
    description:
      "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
    status: "onSale",
    price: 7999,
  },

yarn add drip-table-generator

import DripTableGenerator from 'drip-table-generator';
import 'drip-table-generator/dist/index.min.css';

<DripTableGenerator />