TanStackT
TanStack•11mo ago
skinny-azure

custom vue data table component

I am trying to make a reusable DataTable component with vue, and feel like i'm making things harder on myself. This is the code I've come up with:

import { valueUpdater } from "~/lib/utils";
const {
  columnFilters: _columnFilters = [],
  globalFilter: _globalFilter,
  data,
  columns,
} = defineProps<{
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
  columnFilters?: ColumnFiltersState;
  globalFilter?: string;
}>();
const columnFilters = toRef(() => _columnFilters);
const globalFilter = toRef(() => _globalFilter);
const table = useVueTable({
  get data() {
    return data;
  },
  get columns() {
    return columns;
  },
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  onColumnFiltersChange: (updaterOrValue) =>
    valueUpdater(updaterOrValue, columnFilters),
  onGlobalFilterChange: (updaterOrValue) =>
    valueUpdater(updaterOrValue, globalFilter),
  state: {
    get columnFilters() {
      return columnFilters.value;
    },
    get globalFilter() {
      return globalFilter.value;
    },
  },
});


I want to be able to send in the global filter state as a prop. This does work, but maybe there is a way to simplify things?
Was this page helpful?