Remove a button from React table

Question

I am trying to implement a React Table in my Application which is a collapsible/Expandable in nature. Something like this:

https://ant.design/components/table/#components-table-demo-expand

The code for above is:

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table } from 'antd';

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
  {
    title: 'Action',
    dataIndex: '',
    key: 'x',
    render: () => <a>Delete</a>,
  },
];

const data = [
  {
    key: 1,
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
  },
  {
    key: 2,
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
  },
  {
    key: 3,
    name: 'Not Expandable',
    age: 29,
    address: 'Jiangsu No. 1 Lake Park',
    description: 'This not expandable',
  },
  {
    key: 4,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
  },
];

ReactDOM.render(
  <Table
    columns={columns}
    expandable={{
      expandedRowRender: record => <p style={{ margin: 0 }}>{record.description}</p>,
      rowExpandable: record => record.name !== 'Not Expandable',
    }}
    dataSource={data}
  />,
  document.getElementById('container'),
);

I want to remove the + button and make it such that the whole row is clickable. How Can I do that ?

Guru Hadadi · Accepted Answer · 2020-06-24 05:32:56Z

1

See expandable props. Set expandRowByClick to true and provide custom expandIcon i.e. an empty div

Working demo

Code snippet

<Table
    columns={columns}
    expandRowByClick
    expandable={{
      expandedRowRender: record => (
        <p style={{ margin: 0 }}>{record.description}</p>
      ),
      rowExpandable: record => record.name !== "Not Expandable",
      expandIcon: ({ expanded, onExpand, record }) =>
        expanded ? (
          <div onClick={e => onExpand(record, e)} />
        ) : (
          <div onClick={e => onExpand(record, e)} />
        )
    }}
    dataSource={data}
  />,

answered Jun 24, 2020 at 5:32

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rahul Sharma Over a year ago

Can I just remove the empty div ? That way I won't have an extra column

noe · Accepted Answer · 2020-06-24 05:22:08Z

0

Read the documentation of the antd table https://ant.design/components/table/

answered Jun 24, 2020 at 5:22

noe

2242 silver badges9 bronze badges

Collectives™ on Stack Overflow

Remove a button from React table

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related