React Ant design 4 Input search display table data

Question

I'm tried to create Ant design 4 input search to filter data , Name and age, when i search name or age wanna display table data but its not working anyone know how to do that correctly

stazkblitz here

code here

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    render: text => <a>{text}</a>
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  }
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32
  }
];
const onSearch = value => console.log(value);
ReactDOM.render(
<div><Search
      placeholder="input search text"
      allowClear
      enterButton="Search"
      size="large"
      onSearch={onSearch}
    />
    <br/>
       <br/>   <br/>
    <Table columns={columns} dataSource={data} /></div>,
    document.getElementById('container')
 
);

Thanks

Answer 1

This will fix your problem

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import { Table, Input } from 'antd';
import surveyList from './surveyList';

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    render: text => <a>{text}</a>
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  }
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32
  }
]; 


function SearchTable() {
  const [filterTable, setFilterTable] = useState(null);

  const onSearch = (value) => {
    // const filterData = data.filter((item) => item.survey.includes(value));
    const filterData = data.filter((o) => Object.keys(o).some((k) => String(o[k])
      .toLowerCase()
      .includes(value.toLowerCase())));
    setFilterTable(filterData);
  };

  return (
    <div>
      <Input.Search
        style={{ border: '3px solid red', margin: '0 0 10px 0' }}
        placeholder="Search by..."
        enterButton
        onSearch={onSearch}
      />
      <Table
        columns={columns}
        dataSource={filterTable == null ? data : filterTable}
      />
    </div>
  );
}

export default SearchTable;