Pantanal Grid

Appearance

Persisted State ​

Pantanal Grid can persist user preferences (sort, filters, pagination, column widths) to localStorage for a better user experience.

Persisted State

Pantanal Grid can persist sort order, filters, page size, and column widths into localStorage. Interact with the grid below (sort, filter, resize columns, change page), then reload the page to see the state persisted. The state is stored with key: pantanal-demo-persisted

#
Customer
City
Status
MRR
Customer since
1
North Channel
New York
Active
$ 1,200.00
2016
2
Blue Bird
Chicago
Suspended
$ 1,380.00
2017
3
Magma Labs
Austin
Trial
$ 1,560.00
2018
4
Orion Foods
Portland
Active
$ 1,740.00
2019
5
North Channel
Seattle
Suspended
$ 1,920.00
2020
6
Blue Bird
New York
Trial
$ 2,100.00
2021
7
Magma Labs
Chicago
Active
$ 2,280.00
2022
8
Orion Foods
Austin
Suspended
$ 1,200.00
2016
9
North Channel
Portland
Trial
$ 1,380.00
2017
10
Blue Bird
Seattle
Active
$ 1,560.00
2018
Showing 1-10 of 50 items
Showing 1-10 of 50 items

Current Snapshot

The snapshot stores sort, filters, column order, and widths. Try interacting with the grid above and watch this snapshot update. 

—

Basic Usage ​

Enable state persistence by setting the persistStateKey prop:

vue
<PantanalGrid
  :rows="rows"
  :columns="columns"
  key-field="id"
  persist-state-key="my-grid-state"
  v-model:sort="sort"
  v-model:filter="filter"
  v-model:page="page"
  v-model:pageSize="pageSize"
/>

What Gets Persisted ​

The following state is automatically persisted:

  • Sort order - Column sorting preferences
  • Filters - Active filter values
  • Pagination - Current page and page size
  • Column widths - Resized column widths
  • Column order - Reordered column positions

Example ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import { PantanalGrid, type ColumnDef, type SortDescriptor, type FilterDescriptor } from '@pantanal/grid'

const rows = ref([/* ... */])
const columns: ColumnDef[] = [/* ... */]

const sort = ref<SortDescriptor[]>([])
const filter = ref<FilterDescriptor[]>([])
const page = ref(1)
const pageSize = ref(10)
</script>

<template>
  <PantanalGrid
    :rows="rows"
    :columns="columns"
    key-field="id"
    persist-state-key="my-app-grid"
    v-model:sort="sort"
    v-model:filter="filter"
    v-model:page="page"
    v-model:pageSize="pageSize"
    :enable-column-resize="true"
    :enable-column-reorder="true"
  />
</template>

Clearing Persisted State ​

You can programmatically clear the persisted state:

vue
<script setup lang="ts">
function clearPersistedState() {
  if (typeof window !== 'undefined') {
    localStorage.removeItem('my-app-grid')
    // Reset grid state
    sort.value = []
    filter.value = []
    page.value = 1
    pageSize.value = 10
  }
}
</script>

<template>
  <div>
    <button @click="clearPersistedState">Clear Saved State</button>
    <PantanalGrid
      :rows="rows"
      :columns="columns"
      key-field="id"
      persist-state-key="my-app-grid"
      v-model:sort="sort"
      v-model:filter="filter"
      v-model:page="page"
      v-model:pageSize="pageSize"
    />
  </div>
</template>

Multiple Grids ​

Use different keys for different grids:

vue
<PantanalGrid
  persist-state-key="products-grid"
  <!-- ... -->
/>

<PantanalGrid
  persist-state-key="orders-grid"
  <!-- ... -->
/>

Best Practices ​

  1. Use unique keys: Each grid should have a unique persistStateKey
  2. Namespace keys: Use prefixes like myapp- to avoid conflicts
  3. Clear on logout: Remove persisted state when users log out
  4. Version keys: Include version numbers for breaking changes

See Also ​