Antd Pro Table remove default search buttons and Implement Debounce

Question

I am working on a project using antd pro. For table using antd pro table. Code for implementing antd pro table --

<PageHeaderWrapper title={false}>
  <ProTable
   actionRef={actionRef}
   request={(params, sorter, filter) => getAllData({ ...params, sorter, filter })}
   columns={columns}
   rowSelection={false}
   scroll={{ x: 'max-content' }}
   style={{ marginBottom: '10em' }}
 />
</PageHeaderWrapper>

const columns = [
    {
      title: 'Title',
      dataIndex: 'title',
      hideInForm: true,
      width: '20vw',
      hideInSearch: true
    },
    {
      title: 'Description',
      dataIndex: 'description',
      hideInSearch: true,
      width: '30vw',
      hideInSearch: true,
    },
    {
      title: 'Image',
      dataIndex: 'sliderImage',
      hideInSearch: true,
      width: '15vw',
      render: (_, record) => (
        <img
          src={record.thumbnailUrl}
          onError={(e) => (e.target.src = 'https://picsum.photos/id/1002/200/300')}
          alt="nothing"
          width="96"
          height="64"
          style={{cursor:"pointer"}}
          onClick={()=>console.log('slider image',record.record)}
        />
      ),
    },
    {
      title: 'Edit',
      key: 'edit',
      hideInSearch: true,
      render: (_, record) => (
        <Button type="primary" width="10vw" onClick={() => console.log('click')}>
          Edit
        </Button>
      ),
    },
    {
      title: 'Delete',
      key: 'delete',
      hideInSearch: true,
      render: (_, record) => (
        <Button type="primary" danger width="10vw" onClick={() => console.log('click')}>
          Delete
        </Button>
      ),
    },
];

This gives a view like this https://i.stack.imgur.com/JVqG0.png

Those two Reset & Query Button are given by default. I have two questions.
First, how can I remove these two button?
Second, I want to implement debounce in search section. Currently if I remove {hideInSearch:true} it will show an input field. How can I implement debounce here?

Answer 1

To remove the "Query" and "Reset" buttons, add search={false} to the <ProTable> component:

<ProTable
   search={false}  // here
   actionRef={actionRef}
   request={(params, sorter, filter) => getAllData({ ...params, sorter, filter })}
   columns={columns}
   rowSelection={false}
   scroll={{ x: 'max-content' }}
   style={{ marginBottom: '10em' }}
 />