import React from 'react'
import { Table, TableColumnOptions } from 'react-icecream'

import originalRecords, { Record } from './shared-records'

const columnIdx: TableColumnOptions<Record, void> = {
  title: '索引',
  width: '40px',
  render: (_, __, idx) => idx + 1
}
const columnName: TableColumnOptions<Record, 'name'> = {
  title: '空间名称',
  accessor: 'name'
}
const columnType: TableColumnOptions<Record, 'type'> = {
  title: '空间类型',
  accessor: 'type'
}
const columnRegion: TableColumnOptions<Record, 'region'> = {
  title: '存储区域',
  accessor: 'region'
}
const columnAccess: TableColumnOptions<Record, 'access'> = {
  title: '空间类型',
  accessor: 'access'
}

export default function Demo() {
  return (
    <Table<Record>
      columns={[columnIdx, columnName, columnType, columnRegion, columnAccess]}
      records={originalRecords}
    />
  )
}