JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://app.dineandgift.com/plugins/daterangepicker/daterangepicker.css">
<script src="https://app.dineandgift.com/plugins/daterangepicker/daterangepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.27/daterangepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.27/daterangepicker.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css">
<body>
 <button type="button" onclick="window.location.reload()">Reload page</button>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Tiger Nöxon</td>
            <td>System Architect</td>
            <td>Edinbårgh</td>
            <td>61</td>
            <td>2022/04/06</td>
            <td>$320,800</td>
  ...

JavaScript

$(document).ready(function () {

var rangeSearch = '';
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
	
  		if (rangeSearch === '') {
      	return true;
      }
      
      var colDate = moment(data[4]);
      
      return colDate >= rangeSearch;

  });
  
    $('#example').DataTable({
        searching: true,
        ordering: true,
        select: true,
        stateSave: true,
        "stateSaveParams": function (settings, data) {
        
        	// Save rangesSearch
          data.rangeSearch = rangeSearch;
          console.log('save', data)
        },
        "stateLoadParams": function (settings, data) {
        
        	 // Load rangeSearch
           rangeSearch = data.rangeSearch;
           
           // Make sure its a timestamp
           if (rangeSearch) {
              // Convert to moment object
           		rangeSearch = moment(rangeSearch);
           }
           console.log('load', rangeSearch)
        },
        initComplete: function () {
          this.api().draw();
        },
        dom: 'fBrtipl',
         buttons: [
            {
                extend: 'collection',
                text: 'Search',
                buttons: [
                    {
                        text: 'Clear',
                        action: function ( e, dt, node, config ) {
                            rangeSearch = '';
                            
                            // Save the rangeSearch value
                            dt.state.save();
                            dt.draw();
                        }
                    },
                    {
                        text: 'Last 7 Days',
                        action: function ( e, dt, node, config ) {
                            rangeSearch = moment().subtract(6, 'days');
                            // Save the rangeSearch vlaue
                            dt.state.save();

                            dt.draw();
                        }
                    }
...