TanStackT
TanStack•14mo ago
sad-indigo

Select rows and send to another "selected items" table

I have a table of items and the first column in each row is a checkbox, which when selected, sends that item to another table for "selected items". These will eventually be saved to the database as a personalised list.
The selecting and sending works fine, and I can toggle items between the 2 table, but when I do anything to the main table, like sort columns, it also happens to the selected table. I want the selected table to be independent.

I have created two tables and separated the sorting and columns but it doesn't work:

`
const sorting = ref<SortingState>([]);
const selectedSorting = ref<SortingState>([]);
 mainColumns.value = [...columns.value];
table.value = useVueTable({
    get data() {
      return bulldata.value;
    },
     columns: mainColumns.value, 
    getCoreRowModel: getCoreRowModel(),
    initialState: {
      pagination: {
        pageIndex: INITIAL_PAGE_INDEX,
        pageSize: 50,
      },
    },
    state: {
      get sorting() {
        return sorting.value;
      },
      get columnVisibility() {
        return columnVisibility.value;
      },
// etc
  selectedColumns.value = [...columns.value];
selectedTable.value = useVueTable({
    get data() {
      return selectedRows.value;
    },
    columns: selectedColumns.value,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    state: {
    sorting: selectedSorting.value,
    },
    onSortingChange: (updaterOrValue) => {
      selectedSorting.value =
        typeof updaterOrValue === "function"
          ? updaterOrValue(selectedSorting.value)
          : updaterOrValue;
    },
  });
`

Should this be possible at all or what am I missing? Quite new to Vue too so possible I'm messing up on the Vue end
Was this page helpful?