index.js

$(function () {
  const storageKey = "datagrid-state";

  $("#gridContainer").dxDataGrid({
    dataSource: orders,
    keyExpr: "ID",
    columns: [
      {
        dataField: "OrderNumber",
        width: 130,
        caption: "Invoice Number",
      },
      {
        dataField: "OrderDate",
        dataType: "date",
        sortOrder: "desc",
      },
      {
        dataField: "SaleAmount",
        alignment: "right",
        format: "currency",
      },
      "Employee",
      {
        caption: "City",
        dataField: "CustomerStoreCity",
      },
      {
        caption: "State",
        dataField: "CustomerStoreState",
        groupIndex: 0,
      },
    ],
    allowColumnReordering: true,
    allowColumnResizing: true,
    showBorders: true,
    selection: {
      mode: "single",
    },
    filterRow: {
      visible: true,
    },
    groupPanel: {
      visible: true,
    },
    pager: {
      showPageSizeSelector: true,
      allowedPageSizes: [5, 10, 20],
    },
    stateStoring: {
      enabled: true,
      type: "custom",
      storageKey: storageKey,
      customLoad() {
        return JSON.parse(localStorage.getItem(storageKey));
      },
      customSave(state) {
        if (state) {
          for (let i = 0; i < state.columns.length; i++) {
            state.columns[i].filterValue = null;
          }
        }
        localStorage.setItem(storageKey, JSON.stringify(state));
      },
    },
  });
});