Filtering and Sort order - Save state when hiding component

[gsuhm]

I have a table that I hide to show the detail of the current record - When I hide the table the filterValues gets reset so all the filters get lost when they go back to the table.

Right now I created my own "savedFilterValues" store and hook it into each function that filters - I then use that store as the initial filter value:

initialFilterValue: $savedFilterValues.name || ''

It is working, but I'm wondering if there is a better strategy to maintain the filter/sort state when hiding a table component?

thanks!

[bryanmylee]

Hey @gsuhm, if you have to destroy and re-create the table each time you hide the table view, then that would be the best way. That behaviour would be similar to how a regular component would handle re-initialization.

<script lang="ts">
  import {writable} from 'svelte/store';

  export let filter: string;

  // initialize store with initial prop when the component is mounted.
  const filterStore = writable(filter);
  // ...
</script>

However, if it's possible and if it makes sense for your design, I'd consider extracting the table view model out of the actual component that's being hidden. This allows you to hold onto once instance of the table.

<!-- App.tsx -->
<script lang="ts">
  import {createTable} from 'svelte-headless-table';
  import {writable} from 'svelte/store';

  const data = writable([...]);
  let selectedId: string | null = null;

  const table = createTable(data, {...});
</script>

{#if selectedId == null}
  <Table {table} />
{:else}
  <SelectedRowPreview item={$data.find(item => item.id === selectedId)}/>
{/if}

To share the exact type of the table between the components, you could do something like:

// table.ts
import {createTable} from 'svelte-headless-table';
import type {Writable} from 'svelte/store';

export function createTableWithPlugins<TItem>(data: Writable<TItem[]>) {
  return createTable(data, {...});
}

export type TableWithPlugins = ReturnType<typeof createTableWithPlugins>;

<!-- App.tsx -->
<script lang="ts">
  import {createTableWithPlugins} from './table';
  import {writable} from 'svelte/store';

  const data = writable([...]);
  let selectedId: string | null = null;

  const table = createTableWithPlugins(data);
</script>

{#if selectedId == null}
  <Table {table} />
{:else}
  <SelectedRowPreview item={$data.find(item => item.id === selectedId)}/>
{/if}

<!-- Table.tsx -->
<script lang="ts">
  import type {TableWithPlugins} from './table';

  export let table: TableWithPlugins;
  // ...
</script>

<!-- ... -->

[gsuhm]

I tried creating the table and passing it into the component, but the filters still get cleared - not sure why. I also tried creating the table and the entire view model separate from the component and that didn't work either. I did a simple REPL that shows passing the table to the view component: REPL with passed table

Any ideas why the filteredValues is getting reset on re-render even though the table it references didn't get recreated?

thanks!

[bryanmylee]

I'm still not sure why that's happening, but I'm looking into it!