CODEWITHSUNDEEP
reactjsradio-buttonantd
Omri Shapira
Omri Shapira

Reputation: 209

How to render Radio into antd Table

I'm trying to render Radio button into a column of antd table without any success.

There's a way to do it?

I tried also use regular HTML input tag with the type of radio without any success.

Option 1:

render: (isService) => (
   <span>
      <input type="radio" checked={isService} />
   </span>
)

Option 2:

render: (isService) => (
   <span>
      <Radio value={isService}></Radio>
   </span>
)

The expected result will be a table that one of its columns will contain a Radio (one of my fields of the object is boolean so this is the way I want to show it).

Upvotes: 1

Views: 2005

Answers (3)

Omri Shapira
Omri Shapira

Reputation: 209

Thanks for all the answers!

My problem was I had a search box for each column and when I removed it from the column of the Radio button, it appeared! Maybe the search option of the Antd is problematic with adding Radio/Button and something other than simple text or a link.

Upvotes: 0

Olga
Olga

Reputation: 217

Radio buttons operate as a group and are used when there is a list of two or more options that are mutually exclusive and a user must select exactly one choice. The radio group must have the same name (the value of the "name" attribute). Selecting any radio button in that group automatically deselects any other selected radio button in the same group:

<p>Please select your gender:</p>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br>

Probably in your case you need a checkbox element. A single stand-alone checkbox element is used for a single binary option such as a yes-or-no question:

<label>
  Service
  <input name="service" type="checkbox" checked={isService} onChange={this.handleInputChange} />
</label>

Upvotes: 1

Dennis Vash
Dennis Vash

Reputation: 53934

You need to return ReactNode from render property of Column.

With your example, it seems you have a problem with the columns / dataSource properties provided to your Table.

A simple working example:

const dataSource = [
  {
    key: '1',
    name: 'Mike',
    age: 32,
    address: '10 Downing Street'
  },
  {
    key: '2',
    name: 'John',
    age: 42,
    address: '10 Downing Street'
  }
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    render: age => <Radio checked={age >= 40} />
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address'
  }
];

export default function App() {
  return (
    <FlexBox>
      <Table columns={columns} dataSource={dataSource} />
    </FlexBox>
  );
}

Edit Q-57805758-RenderRadioButton

Upvotes: 1

Related Questions