Antd 行选择显示在第二列

Question

I am trying to switch between a table with expanded rows and when a button is pressed, switching to row selection. When switching to row selection in this way, the select checkboxes are appearing in the second column instead of the first column. Try this in latest version:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Radio, Divider } from "antd";
const columns = [
  {
    title: "Name",
    dataIndex: "name",
    render: (text) => <a>{text}</a>
  },
  {
    title: "Age",
    dataIndex: "age"
  },
  {
    title: "Address",
    dataIndex: "address"
  }
];
const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "4",
    name: "Disabled User",
    age: 99,
    address: "Sidney No. 1 Lake Park"
  }
]; // rowSelection object indicates the need for row selection

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === "Disabled User",
    // Column configuration not to be checked
    name: record.name
  })
};

const Demo = () => {
  const [selectionType, setSelectionType] = useState("checkbox");
  const [expanding, setExpanding] = useState(true);
  return (
    <div>
      <Radio.Group
        onChange={({ target: { value } }) => {
          setSelectionType(value);
        }}
        value={selectionType}
      >
        <Radio value="checkbox">Checkbox</Radio>
        <Radio value="radio">radio</Radio>
      </Radio.Group>
      <br />
      <Radio.Group
        onChange={({ target: { value } }) => {
          setExpanding(value === "true");
        }}
        value={expanding.toString()}
      >
        <Radio value="true">Expanding</Radio>
        <Radio value="false">Selecting</Radio>
      </Radio.Group>

      <Divider />

      <Table
        rowSelection={
          expanding
            ? undefined
            : {
                type: selectionType,
                ...rowSelection
              }
        }
        expandedRowRender={expanding ? () => <div>expanded</div> : undefined}
        columns={columns}
        dataSource={data}
      />
    </div>
  );
};

ReactDOM.render(<Demo />, document.getElementById("container"));

When you change the selecting/expanding radio button, you can see the problem with the checkbox column in selecting mode. Is this a bug or am I using the component incorrectly?

Answer 1

You don't have your expandable prop properly configured. expandedRowRender should be an attribute for the expandable prop that goes into the component. In addition, to control the visibility of the expandable column, you can take advantage of the expandIconColumnIndex property to hide the column when the expanding state is true.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Radio, Divider } from "antd";
const columns = [
  {
    title: "Name",
    dataIndex: "name",
    render: (text) => <a>{text}</a>
  },
  {
    title: "Age",
    dataIndex: "age"
  },
  {
    title: "Address",
    dataIndex: "address"
  }
];
const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "4",
    name: "Disabled User",
    age: 99,
    address: "Sidney No. 1 Lake Park"
  }
]; // rowSelection object indicates the need for row selection

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === "Disabled User",
    // Column configuration not to be checked
    name: record.name
  })
};

const Demo = () => {
  const [selectionType, setSelectionType] = useState("checkbox");
  const [expanding, setExpanding] = useState(true);
  return (
    <div>
      <Radio.Group
        onChange={({ target: { value } }) => {
          setSelectionType(value);
        }}
        value={selectionType}
      >
        <Radio value="checkbox">Checkbox</Radio>
        <Radio value="radio">radio</Radio>
      </Radio.Group>
      <br />
      <Radio.Group
        onChange={({ target: { value } }) => {
          setExpanding(value === "true");
        }}
        value={expanding.toString()}
      >
        <Radio value="true">Expanding</Radio>
        <Radio value="false">Selecting</Radio>
      </Radio.Group>

      <Divider />

      <Table
        rowSelection={
          expanding
            ? undefined
            : {
                type: selectionType,
                ...rowSelection
              }
        }
        expandable={{
          expandedRowRender: () => <div>expanded</div>,
          expandIconColumnIndex: expanding ? 0 : -1
        }}
        columns={columns}
        dataSource={data}
      />
    </div>
  );
};

ReactDOM.render(<Demo />, document.getElementById("container"));

DEMO