import { SheetComponent } from '@antv/s2-react';
import { useUpdate } from 'ahooks';
import { Button } from 'antd';

const data = Array(100).fill({
  province: 'aaaa'.repeat(100),
  city: 'aa',
});

export default function A() {
  const update = useUpdate();

  return (
    <div>
      <Button
        onClick={(e) => {
          update();
        }}
      >
        update
      </Button>

      <br />
      <SheetComponent
        sheetType="table"
        options={{
          width: 600,
          height: 480,
          style: {
            colCell: {
              maxLines: 3,
              wordWrap: true,
              textOverflow: 'ellipsis',
            },
            dataCell: {
              maxLines: 3,
              wordWrap: true,
              textOverflow: 'ellipsis',
            },
          },
        }}
        dataCfg={{
          fields: {
            columns: ['province', 'city'],
          },
          meta: [
            {
              field: 'province',
              name: '省份',
            },
            {
              field: 'city',
              name: '城市',
            },
          ],
          data,
        }}
      />
    </div>
  );
}