ai-proj-demo/src/module/datasource/component/DataTableStruct.jsx

import React from "react";
import { Table } from "antd";
import styled from 'styled-components'

const DataTable = styled.div`
  .table-style {
    .ant-table-thead {
      > tr {
        > th {
          background: #e3eefd !important;
        }
      }
    }
  }
`

export default function DataTableStruct() {
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '字段',
      dataIndex: 'field',
      key: 'field',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '长度',
      dataIndex: 'length',
      key: 'length',
    },
  ]

  const data = [
    {
      key: 1,
      id: 1,
      field: 'SCHED_NAME',
      type: 'VARCHAR(120)',
      length: 120
    },
    {
      key: 2,
      id: 2,
      field: 'SCHED_NAME',
      type: 'VARCHAR(120)',
      length: 120
    },
    {
      key: 3,
      id: 3,
      field: 'SCHED_NAME',
      type: 'VARCHAR(120)',
      length: 120
    },
  ]
  return (
    <DataTable>
      <Table columns={columns} dataSource={data} className={'table-style'} />
    </DataTable>
  )
}