Ant table custom filter checkbox without dropdown

Question

I am using ant table for my project where I want to filter records on click of checkbox inside my header row, when I click on check box all zero valued rows should be filtered and others should stay, is there any way I can do this? Demo

Answer 1

You can achieve the desired feature by defining a custom columns title prop that renders a controlled Checkbox component in addition to the column's title string. When the Checkbox is true, you then filter out the table data based on your desired filter condition.

(As an aside, I did initially try to get the same functionality to work via the onFilter and filterIcon approach, but that approach proved unsuccessful.)

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Table, Checkbox } from "antd";
import "./index.scss";

const DifferenceTable = (props) => {
  const [isChecked, setIsChecked] = useState(false);

  const data = [
    {
      date: "2020-06-17",
      units: 2353.0,
      amount: 8891206.27,
      date: 2323,
      units: 243234,
      amount: 234234,
      units_diff: 0,
      amount_diff: 0
    },
    {
      date: "2020-06-17",
      units: 2353.0,
      amount: 8891206.27,
      date: 2323,
      units: 243234,
      amount: 234234,
      units_diff: 1,
      amount_diff: 1
    }
  ];

  const processedData = isChecked
    ? data.filter((datum) => datum.units_diff || datum.amount_diff)
    : data;
  const columns = [
    {
      title: "Bank",
      children: [
        {
          title: "Trxn Date",
          dataIndex: "date",
          key: "date",
          width: 100
        },
        {
          title: "Sum Units",
          dataIndex: "units",
          key: "units",
          width: 100
        },
        {
          title: "Sum Amounts",
          dataIndex: "amount",
          key: "units",
          width: 100
        }
      ]
    },
    {
      title: "CUSTOMER",
      children: [
        {
          title: "Trxn Date",
          dataIndex: "date",
          key: "date",
          width: 100
        },
        {
          title: "Sum Units",
          dataIndex: "units",
          key: "units",
          width: 100
        },
        {
          title: "Sum Amounts",
          dataIndex: "amount",
          key: "amount",
          width: 100
        }
      ]
    },
    {
      title: () => (
        <div>
          <span>Difference&nbsp;&nbsp;</span>
          <Checkbox
            checked={isChecked}
            onChange={(e) => {
              setIsChecked(e.target.checked);
            }}
          />
        </div>
      ),
      dataIndex: "units_diff",
      key: "units_diff",
      children: [
        {
          title: "Units",
          dataIndex: "units_diff",
          key: "units_diff",
          width: 100
        },
        {
          title: "Amounts",
          dataIndex: "amount_diff",
          key: "amount_diff",
          width: 100
        }
      ],
      align: "center"
    }
  ];

  return (
    <Table
      // rowKey="uid"
      className="table diff_table"
      columns={columns}
      dataSource={processedData}
      pagination={false}
      scroll={{ y: 400, x: 0 }}
    />
  );
};

ReactDOM.render(<DifferenceTable />, document.getElementById("container"));

A functional demo is available at the following CodeSandbox link