CODEWITHSUNDEEP
antd
Jaison James
Jaison James

Reputation: 4552

Hide column for table using antd

How can we hide a column from the table for displaying in frontend which already exists in the array for using ant design table?

For example, I have a column called ID in my array object, but no need to show in the table view, it should be kept in the JSON list itself for some reference purpose.

Fiddle link - In this example I don't want to show the ID column in the table, but I have used the ID for some reference like a row delete.

Upvotes: 15

Views: 59989

Answers (7)

Iolo
Iolo

Reputation: 2232

To build on previous answers and add one that also plays nicer with typescript:

const showOptionalColumn = false; // or however you determine it;

const columns: TableProps<TItem>["columns"] = [
  showOptionalColumn && {
    title: "Id",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  }
].filter(Boolean); // filters out any falsy values

Upvotes: 0

doctorgu
doctorgu

Reputation: 634

I know it is old question and has many answer but I want to share another solution that I just applied.

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  },
  ...(!hideLast ?
    [
      {
        title: "Action",
        key: "action",
        dataIndex: "action",
        hidden: true
      }
    ]
    :
    []
  )
];

Upvotes: 1

Sem
Sem

Reputation: 1397

Here is how I did it. The concept is the same, which is to remove (filter out) the column from the array.

Add a property "hidden" to the column object, then filter it out.

let columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  },
  {
    title: "Action",
    key: "action",
    dataIndex: "action",
    hidden: true
  }
].filter(item => !item.hidden);

Upvotes: 33

karfus
karfus

Reputation: 939

If you already have the code generating your columns, a much simpler option than implementing a custom render method to hide a column is simply to filter it out of your completed columns list, e.g.:

let columns = [
  {
    title: "Id",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  }
];

return columns.filter(col => col.dataIndex !== 'id');

Upvotes: 11

Наранбат
Наранбат

Reputation: 61

You can override header and body render methods as following assuming your column has visible property.

import React, {Component} from 'react';

class Test extends Component {
  render() {
    const renderBody = (props, columns) => {
      return (
        <tr className={props.className}>
          {columns.map((item, idx) => {
            if (item.visible) {
              return props.children[idx]
            }
          })}
        </tr>
      );
    }

    const renderHeader = (props, columns) => {
      return (
        <tr>
          {columns.map((item, idx) => {
            if (item.visible)
              return props.children[idx];
          })};
        </tr>
      );
    }

    const columns = [{
      title: 'col1',
      dataIndex: 'col1',
      visible: true
    }, {
      title: 'col2',
      dataIndex: 'col2',
      visible: false
    }]

    return (
      <Table
        rowKey="key"
        columns={columns}
        dataSource={data.list || []}
        components={{
          header: {
            row: (props) => renderHeader(props, columns)
          },
          body: {
            row: (props) => renderBody(props, columns)
          },
        }}
      />
    )
  }
}

Upvotes: 6

maktel
maktel

Reputation: 1372

Table's prop columns is used to control what columns will be rendered by the table, but has no influence over shape of the data used as dataSource. Omitting a column does not remove its value from dataSource and you can still reference it for example in render property of the column (e.g. to generate a callback).

Sample code (note that hiddenValue is not directly referenced by dataIndex property of any column and could be omitted altogether):

const TableWithHiddenColumn = () => {
    const dataSource = [
        { renderedValue: 'foo', hiddenValue: 'id_1' },
        { renderedValue: 'bar', hiddenValue: 'id_2' },
        { renderedValue: 'biz', hiddenValue: 'id_3' },
    ];

    const columns = [
        { title: 'Visible column', dataIndex: 'renderedValue', key: 'renderedValue' },
        {
            title: 'Action',
            key: 'action',
            render: (record) => (
                <Button
                    onClick={() => {
                        console.log(record.hiddenValue);
                    }}
                >
                    {record.hiddenValue}
                </Button>
            ),
        },
    ];

    return <Table columns={columns} dataSource={dataSource} />;
};

Result:

rendered result of above code

Upvotes: 1

Sasha
Sasha

Reputation: 5944

Generally Maktel suggestion is correct: you can easily implement what you want by defining render in column (note that there is no dataIndex):

let columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  },
  {
    title: "Action",
    key: "action",
    render: (row) => {
      let api = "/api/v1/row/delete/";
      //this ID be sued for POST delete row like a API below
      api = api + row.id;
      return <span onClick={() => { alert(api);}}>
         Delete
      </span >

    }
  }
];

let data = [
  {
    id: 312,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
  },
  {
    id: 1564,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
  }
];

const App = () => <Table columns={columns} dataSource={data} />;

Upvotes: 2

Related Questions