reactjsreact-hooksreact-tablereact-table-v7

React-table rerender table when deleting a row


I'm using react-table in my project and I have a button to delete the row. It works fine but when the row is deleted the table is rerendered ( loses current page in pagination, the search filters, etc.) Is there a way to prevent this to happen?

My code:

const Taxis = ({data}) => {

     const [taxis, setTaxis] = useState([...data])


     const columns = useMemo(() => [
     {
          Header: 'Active',
          accessor: 'active',
          Cell: ({ value }) => {
               return <p className="flex justify-end md:block"><Icon path={value ? mdiCheck : mdiClose} size={1} className={`md:mx-auto ${value ? 'text-green-400' : 'text-red-400'}`}/></p>  
          }
     },
     {
          Header: 'Acciones',
          accessor: 'actions',
          Cell: ({row}) => {
               return <><div className="flex justify-end md:justify-center pb-2 md:pb-0">
                    <div className="group relative">
                         <button className="flex rounded-md p-1 text-primary border border-primary hover:border-secondary hover:text-secondary mr-2">
                              <Icon path={mdiPencil} size={1} />
                         </button>
                         <span className="absolute hover-sibling:opacity-100 z-30 w-20 right-2 opacity-0 bg-white rounded-lg shadow-lg text-primary px-2 py-1 mt-1 border border-gray-200 text-center text-sm">
                              Editar taxi
                         </span>
                    </div>
                    <div className="relative">
                         <button className="flex text-blanco border border-primary hover:border-secondary rounded-md p-1 bg-primary hover:bg-secondary" 
                           onClick={() => {/*this is my function to delete*/
                             const data = await fetch(`${APP_CONSTANTS.REST_API}`,{
                                method: "DELETE"
                             })
                             if (data.ok) {
                               setTaxis(taxis.filter( taxi => taxi.idtaxi !== row.original.idtaxi))
                             }
                           }}>
                              <Icon path={mdiDeleteForever} size={1} />
                         </button>
                         <span className="absolute hover-sibling:opacity-100 z-30 w-24 right-0 opacity-0 bg-white rounded-lg shadow-lg text-primary px-2 py-1 mt-1 border border-gray-200 text-center text-sm">
                              Eliminar taxi
                         </span>
                    </div>
               </div>
          </>
          }
     },

   ], [taxis])
   
   return (
        <>
          <Table columns={columns} data={taxis} table={'Taxis'} />
        </>
   ) 

}

Solution

  • The docs have the answer! Namely, you have to manually prevent those things from updating, by using the autoResetX properties on the table. In this case, you'd probably want autoResetPage and autoResetFilters set to false in order to prevent those fields from updating when your dataset does.