2

I want to do this: each row is a Radio group, each cell is a Radio button, like the picture:

An example of Radio group is like:

<Radio.Group onChange={this.onChange} value={this.state.value}>
        <Radio value={1}>A</Radio>
        <Radio value={2}>B</Radio>
        <Radio value={3}>C</Radio>
        <Radio value={4}>D</Radio>
      </Radio.Group>

But I don't know how to add a Radio group to wrap each Antd table row?

My current code is:

  renderTable() {
    let columns = [];
    columns.push(
      {
        title: '',
        dataIndex: 'name',
        key: 'name',
        width: '45vw',
      },
    );

    this.props.task.options.forEach((option, i) => {
      columns.push(
        {
          title: option,
          dataIndex: option,
          key: option,
          className: 'choice-table-column',
          render: x => {
            return <Radio value={0} />
          },
        },
      );
    });

    let rowHeaders = [];
    this.props.task.extras.forEach((extra, i) => {
      rowHeaders.push(
        {"name": `${i + 1}. ${extra}`},
      );
    });

    // How can I pass a className to the Header of a Table in antd / Ant Design?
    // https://stackoverflow.com/questions/51794977/how-can-i-pass-a-classname-to-the-header-of-a-table-in-antd-ant-design
    const tableStyle = css({
      '& thead > tr > th': {
        textAlign: 'center',
      },
      '& tbody > tr > td': {
        textAlign: 'center',
      },
      '& tbody > tr > td:first-child': {
        textAlign: 'left',
      },
    });

    return (
      <div>
        <Table className={tableStyle} columns={columns} dataSource={rowHeaders} size="middle" bordered pagination={false} />
      </div>
    );
  }
hsluoyz
  • 2,739
  • 5
  • 35
  • 59

2 Answers2

1

I don't think it is possible to use radio group for each row, however you can achieve it in a traditional way.

Here is code sample

https://codesandbox.io/s/goofy-benz-12kv5

enter image description here

 class App extends React.Component {
  state = {
    task: { options: [1, 2, 3, 4, 5], extras: [6, 7, 8, 9, 10] },
    selected: {}
  };

  onRadioChange = e => {
    let name = e.currentTarget.name;
    let value = e.currentTarget.value;
    this.setState({
      ...this.state,
      selected: { ...this.state.selected, [name]: value }
    });
  };

  onSubmit = () => {
    console.log(this.state.selected);
    this.setState({
      ...this.state,
      selected: {}
    });
  };

  render() {
    let columns = [];
    columns.push({
      title: "",
      dataIndex: "name",
      key: "name",
      width: "45vw"
    });

    this.state.task.options.forEach((option, i) => {
      columns.push({
        title: option,
        key: option,
        render: row => {
          return (
            <input
              type="radio"
              checked={this.state.selected[row.name] == option}
              onChange={this.onRadioChange}
              name={row.name}
              value={option}
            />
          );
        }
      });
    });

    let rowHeaders = [];
    this.state.task.extras.forEach((extra, i) => {
      rowHeaders.push({ name: `${i + 1}.${extra}` });
    });

    return (
      <div>
        <Button onClick={this.onSubmit} type="primary">
          {" "}
          Submit
        </Button>
        <Table
          columns={columns}
          dataSource={rowHeaders}
          size="middle"
          bordered
          pagination={false}
        />

        <Tag color="red">Selected options</Tag>
        <br />

        {JSON.stringify(this.state.selected)}
      </div>
    );
  }
}
Hemanthvrm
  • 2,319
  • 1
  • 17
  • 26
0

hi there i had the same problem and base on new updates on antd this way of using is easier

    <Table
      rowSelection={{
        type: "radio",
        getCheckboxProps: (record) => {
          console.log("record", record);
        },
      }}
      pagination={{ hideOnSinglePage: true }}
      columns={columns}
      dataSource={data}
    />

example : https://ant.design/components/table/#components-table-demo-row-selection

for hiding table header : https://newbedev.com/javascript-antd-table-hide-table-header-code-example

hope its usefull

Mobina Saffary
  • 31
  • 5