---
description: 'A DetialTable component.'
labels: ['label1', 'label2', 'label3']
---

import DetialTable from './index'
import '@platformuiserver/platformui.assets/css/index.less'
import { Button, Radio } from 'antd'

### 组件使用方式

```js
export const BasicDetialTable = () => {
  const columnsBase = ({ editTableRow, onRadioChange, delTableRow }) => {
    return [
      {
        title: '默认环境',
        dataIndex: 'defaultEnv',
        key: 'defaultEnv',
        align: 'center',
        width: 120,
        render: (text, record) => <Radio value={record.id} checked={record.defaultEnv} onChange={(e) => onRadioChange(e.target.value, record)} />
      },
      {
        title: '环境名称',
        dataIndex: 'envName',
        key: 'envName'
      },
      {
        title: '环境描述',
        dataIndex: 'remark',
        key: 'remark'
      },
      {
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
        align: 'center',
        width: 200,
        render: (text, record) => (
          <>
            <Button type="link" style={{ marginRight: '10px' }} onClick={() => editTableRow(record)}>
              编辑
            </Button>
            <Button type="link" onClick={() => delTableRow(record)}>
              删除
            </Button>
          </>
        )
      }
    ]
  }
  const tableList = [
    {
      defaultEnv: false,
      envName: '环境名称',
      remark: '环境描述',
      id: 1
    },
    {
      defaultEnv: true,
      envName: '环境名称',
      remark: '环境描述',
      id: 2
    },
    {
      defaultEnv: false,
      envName: '环境名称',
      remark: '环境描述',
      id: 3
    }
  ]
  const editTableRow = (record) => {
    console.log(record)
  }
  const onRadioChange = (value, record) => {
    console.log(value, record)
  }
  const delTableRow = (record) => {
    console.log(record)
  }

  return (
    <div style={{ minWidth: '400px', border: '5px solid #e8e8e8' }}>
      <DetialTable
        columns={columnsBase({
          editTableRow: (record) => editTableRow(record),
          onRadioChange: (value, record) => onRadioChange(value, record),
          delTableRow: (record) => delTableRow(record)
        })}
        data={tableList}
        pagination={false}
      />
    </div>
  )
}
```

### Using props to customize the text

Modify the text to see it change live:

```js live
<div style={{ minWidth: '400px', border: '5px solid #e8e8e8' }}>
  <DetialTable
    columns={[
      {
        title: '默认环境',
        dataIndex: 'defaultEnv',
        key: 'defaultEnv',
        align: 'center',
        width: 120,
        render: (text, record) => (
          <Radio
            value={record.id}
            checked={record.defaultEnv}
            onChange={(e) => {
              console.log(e.target.value)
            }}
          />
        )
      },
      {
        title: '环境名称',
        dataIndex: 'envName',
        key: 'envName'
      },
      {
        title: '环境描述',
        dataIndex: 'remark',
        key: 'remark'
      },
      {
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
        align: 'center',
        width: 200,
        render: (text, record) => (
          <>
            <Button
              type="link"
              style={{ marginRight: '10px' }}
              onClick={() => {
                console.log(record)
              }}
            >
              编辑
            </Button>
            <Button
              type="link"
              onClick={() => {
                console.log(record)
              }}
            >
              删除
            </Button>
          </>
        )
      }
    ]}
    data={[
      {
        defaultEnv: false,
        envName: '环境名称',
        remark: '环境描述',
        id: 1
      },
      {
        defaultEnv: true,
        envName: '环境名称',
        remark: '环境描述',
        id: 2
      },
      {
        defaultEnv: false,
        envName: '环境名称',
        remark: '环境描述',
        id: 3
      }
    ]}
    pagination={false}
  />
</div>
```
