make antd table row only visible when clicked

Question

I have simple antd table where is columns 'State','Title' and three rows, i dont know how to display:none specific row by default and make it visible by clicking a button for example at the moment when user goes to the table by default there is three rows but i want to set row 'value === OrderState.Delivered' to 'display:hidden' by default, but when user clicks button 'Delivered' then it should be visible and when user clicks 'All states' button then everything should be visible except that same 'value === OrderState.Delivered'. Here is my code, you can try it: https://codesandbox.io/s/dreamy-surf-t9eh3?file=/src/Test.js:1345-1355

Answer 1

These are the changes I made to your code

• by default filter eventsData to not show the Delivered one

  const [filteredEventsData, setFilteredEventsData] = useState( eventsData.filter((f) => f.key;== "Delivered") );

• in the filterData function, filter out delivered even when All states is clicked

  function filterData(filter) { if (filter) { setFilteredEventsData(eventsData.filter((f) => f.key === filter)); } else { setFilteredEventsData(eventsData.filter((f) => f.key;== "Delivered")); } }