CODEWITHSUNDEEP
reactjsantd
Rahul Sharma
Rahul Sharma

Reputation: 2495

Remove a button from React table

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

enter image description here

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 ?

Upvotes: 0

Views: 464

Answers (2)

gdh
gdh

Reputation: 13682

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}
  />,

Upvotes: 1

noe
noe

Reputation: 224

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

Upvotes: 0

Related Questions