CODEWITHSUNDEEP
reactjsantd
gayanrathnayaka
gayanrathnayaka

Reputation: 41

Is it possible to add a row of Input controls to Ant table for searching purposes. Please refer the Image attached

I want to add a row of inputs(text inputs,dropdowns) for filtering purposes right below the column header row in a antd table.Please refer the attached image.Is it possible to do ?

enter image description here

Upvotes: 0

Views: 930

Answers (1)

Quentin Grisel
Quentin Grisel

Reputation: 4987

I don't know how you treat your data, but if you just need an input, i found two possibilities :

  • You can pass JSX to the title properties of you header array:
{
  title: <div>Notes<br /><input type='text' /></div>,
  dataIndex: 'note',
  width: 100,
},

Here i pass an input, but you can make a custom component that accept your slice of data you want to filter.

  • You can add a row where every colum contains the input (custom component which will treat data passed as props):
{
  key:0,
  date: <input type='text' />,
  amount: <input type='text' />,
  type: <input type='text' />,
  note: <input type='text' />,
},

I think the second is easier to setup. Assuming you data come from a API call, they are available outside of your data array that you use to display datas in the table. So you can filter it to just pass whatever you want as a prop and manage it in your cutom input/select component.

It sound like duplicating data but I can't think of another way to do it.

Upvotes: 1

Related Questions