<div id="container"></div>

import React from "react";
import ReactDOM from "react-dom";
import { SheetComponent } from '@antv/s2-react';
import '@antv/s2-react/dist/s2-react.min.css';

// 1. 准备数据
const data = [
  {
    "province": "浙江",
    "city": "杭州",
    "type": "笔",
    "price": 1
  },
  {
    "province": "浙江",
    "city": "杭州",
    "type": "纸张",
    "price": 2
  },
  {
    "province": "浙江",
    "city": "舟山",
    "type": "笔",
    "price": 17
  },
  {
    "province": "浙江",
    "city": "舟山",
    "type": "纸张",
    "price": 6
  },
  {
    "province": "吉林",
    "city": "长春",
    "type": "笔",
    "price": 8
  },
  {
    "province": "吉林",
    "city": "白山",
    "type": "笔",
    "price": 12
  },
  {
    "province": "吉林",
    "city": "长春",
    "type": "纸张",
    "price": 3
  },
  {
    "province": "吉林",
    "city": "白山",
    "type": "纸张",
    "price": 25
  },

  {
    "province": "浙江",
    "city": "杭州",
    "type": "笔",
    "price": 20
  },
  {
    "province": "浙江",
    "city": "杭州",
    "type": "纸张",
    "price": 10
  },
  {
    "province": "浙江",
    "city": "舟山",
    "type": "笔",
    "price": 15
  },
  {
    "province": "浙江",
    "city": "舟山",
    "type": "纸张",
    "price": 2
  },
  {
    "province": "吉林",
    "city": "长春",
    "type": "笔",
    "price": 15
  },
  {
    "province": "吉林",
    "city": "白山",
    "type": "笔",
    "price": 30
  },
  {
    "province": "吉林",
    "city": "长春",
    "type": "纸张",
    "price": 40
  },
  {
    "province": "吉林",
    "city": "白山",
    "type": "纸张",
    "price": 50
  }
];

// 2. 配置数据
const s2DataCfg = {
  fields: {
    columns: ["province", "city", "type", "price"], // 要展示的列头字段 id 列表
  },
  meta: [
    // 列头字段对应的元信息，比如展示的中文名
    {
      field: "province",
      name: "省份",
    },
    {
      field: "city",
      name: "城市",
    },
    {
      field: "type",
      name: "类型",
    },
    {
      field: "price",
      name: "价格",
    },
  ],
  data,
};

// 3. 添加配置
const s2Options = {
  width: 400,
  height: 200,
};

// 4, 渲染
ReactDOM.render(
  <SheetComponent
    sheetType="editable" // 此处指定sheetType为editable
    dataCfg={s2DataCfg}
    options={s2Options}
  />,
  document.getElementById('container')
);