How to update react datatable ( react-data-table-component library) based on button click

Question

I am using react-data-table-component library to get data from API and show it in a datatable. I have a custom Date filter option where I can update the data array for datatable. I need to refresh the datatable part alone upon updating the data.

 <DataTable key={number} columns={columns} data={filteredItems} title ='SandBox ' subHeader
        subHeaderComponent={subHeaderComponentMemo} pagination
        paginationResetDefaultPage={resetPaginationToggle} nation ltr   fixedHeader  highlightOnHover responsive striped noDataComponent={"No records"}/>

Here filteredItems value I can update on button click but I need to show the updated data on datatable. I cant refresh the page as it will fetch new data from API.


    useEffect(() => {

    fetch( API_LINK)
    .then(res => res.json())
    .then(
      (result) => {
        setIsLoaded(true);
        console.log(result)
        setItems(result); 


      },
      // Note: it's important to handle errors here
      // instead of a catch() block so that we don't swallow
      // exceptions from actual bugs in components.
      (error) => {
        setIsLoaded(true);
        setError(error);
      },
    )
    } ,[currentLimitVal])

if (error) {
  return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
  return <div>Loading...</div>;
} else {
// console.log(items)

if ( items.length > 0 )
{

        var te ='';
        var no_space ='';
        function myFunction(item) 
        {
            var letters = /^[A-Za-z]+$/

            if (item.indexOf(' ') <= 0 && item.indexOf(':') <= 0 && !/\d/.test(item))
            {
                te = te+'item.'+item+' && item.'+item+'.toString().toLowerCase().includes(filterText.toLowerCase()) || ';
                var sel ='row => row.'+item;
                // console.log(sel);
                columns.push(
                    {
                    name : item,
                selector:eval(sel),
                sortable: true 
                    }
                );
            }

 
        }

        // console.log(columns);
        Object.keys(items[0]).forEach(myFunction);
        columnsList = columns.length > 0
            && columns.map((item, i) => {
                if (  item.name.toLowerCase().includes('date') )
            return (
                <option key={i} value={item.name}>{item.name}</option>
            )
        }, this);

      
        te = te.slice(0, -3);
        filteredItems = items.filter(
            item => eval(te),
        );
     
        
  
}

Above is code to get data and add filter conditions.

  
        if (typeof(fromDate) == 'undefined' || typeof(toDate) == 'undefined'  )
        {
            message.error('Choose the Range Please ! ');
        }
        else if (typeof(colmunChoice) == 'undefined')
        {
            message.error('Choose the Date Column  Please ! ');
         }
        else
        {
        var Fdate = new Date(fromDate); 
        var Tdate = new Date(toDate); 
        console.log( colmunChoice);
        const format = ['DD MM YYYY', 'MM DD YYYY', 'YYYY MM DD', 'YYYY DD MM', 'MMM DD YYYY',
        'DD MMM YYYY', 'YYYY MMM DD', 'YYYY DD MMM','MM DD YY']
        const toFormat = 'YYYY MM DD';

        filtered = items.filter(a => {
            if(a[colmunChoice])
            {
            console.log( a[colmunChoice]);
            // var date = new Date(a[colmunChoice]);
            var date1  = a[colmunChoice].replace(/ +/g, '-')        
            var date =  moment(date1, format).format(toFormat);    
            var Fdate =  moment(fromDate, format).format(toFormat);    
            var Tdate =  moment(toDate, format).format(toFormat);    
            console.log( date);
             return (date >= Fdate && date <= Tdate);
            }
          });

          filteredItems =  filtered;
          console.log(filteredItems);
          
        //  I need to update data with filteredItems here 

        }


      }

Handling a date range search here. I need to push the result of the search to Data table.

windmaomao · Accepted Answer · 2021-09-22 15:35:57Z

2

The prop filteredItems is a data already fetched, so you shouldn't need to refresh the api.

  const onRowDelete = row => () => {
    const rows = filteredItems.filter(item => item.id !== row.id)
    setFilteredItems(rows)
  }

Assuming you want to delete a row, and filteredItems a state, you can use the above approach to refresh the table. By design, DataTable should refresh the data for you when the data prop changes.

answered Sep 22, 2021 at 15:35

windmaomao

7,7322 gold badges37 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dinak lal V Over a year ago

Previously filteredItems was just a variable ( var filteredItems;) It was working fine then, just above updation in data table was not happening. But as you mentioned i made like this way. const [filteredItems, setfilteredItems] = useState([]); . Now i am getting error like this. ` Too many re-renders. React limits the number of renders to prevent an infinite loop.`

Dinak lal V Over a year ago

Exactly while setting the filteredItems data I am getting above error. setFilteredItems(filtered);

windmaomao Over a year ago

you have to show more code what you did, ex. setFilteredItems can't be called too often.

Dinak lal V Over a year ago

I have added code in Question. Used normal variable for filteredItems there. If i am using setFilteredItems getting too many render error.

Dinak lal V Over a year ago

I have managed to resolve the error. Thanks

Collectives™ on Stack Overflow

How to update react datatable ( react-data-table-component library) based on button click

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related