diff --git a/examples/vue/basic-external-state/src/App.tsx b/examples/vue/basic-external-state/src/App.tsx index 9f1b12d0..51587e41 100644 --- a/examples/vue/basic-external-state/src/App.tsx +++ b/examples/vue/basic-external-state/src/App.tsx @@ -78,39 +78,33 @@ export default defineComponent({ pageSize: 10, }) - const table = useTable( - { - key: 'basic-external-state', // needed for devtools - debugTable: true, - features, - rowModels: { - sortedRowModel: createSortedRowModel(sortFns), - paginatedRowModel: createPaginatedRowModel(), - }, - columns, - get data() { - return data.value - }, - state: { - get sorting() { - return sorting.value - }, - get pagination() { - return pagination.value - }, - }, - onSortingChange: (updater: Updater) => { - sorting.value = resolveUpdater(updater, sorting.value) + const table = useTable({ + key: 'basic-external-state', // needed for devtools + debugTable: true, + features, + rowModels: { + sortedRowModel: createSortedRowModel(sortFns), + paginatedRowModel: createPaginatedRowModel(), + }, + columns, + get data() { + return data.value + }, + state: { + get sorting() { + return sorting.value }, - onPaginationChange: (updater: Updater) => { - pagination.value = resolveUpdater(updater, pagination.value) + get pagination() { + return pagination.value }, }, - (state) => ({ - sorting: state.sorting, - pagination: state.pagination, - }), - ) + onSortingChange: (updater: Updater) => { + sorting.value = resolveUpdater(updater, sorting.value) + }, + onPaginationChange: (updater: Updater) => { + pagination.value = resolveUpdater(updater, pagination.value) + }, + }) useTanStackTableDevtools(table) diff --git a/examples/vue/column-ordering/src/App.vue b/examples/vue/column-ordering/src/App.vue index 97c4a667..9841ae45 100644 --- a/examples/vue/column-ordering/src/App.vue +++ b/examples/vue/column-ordering/src/App.vue @@ -78,22 +78,16 @@ const stressTest = () => { data.value = makeData(1_000) } -const table = useTable( - { - features, - data, - get columns() { - return columns.value - }, - debugTable: true, - debugHeaders: true, - debugColumns: true, +const table = useTable({ + features, + data, + get columns() { + return columns.value }, - (state) => ({ - columnOrder: state.columnOrder, - columnVisibility: state.columnVisibility, - }), -) + debugTable: true, + debugHeaders: true, + debugColumns: true, +}) const randomizeColumns = () => { table.setColumnOrder( diff --git a/examples/vue/column-pinning-split/src/App.vue b/examples/vue/column-pinning-split/src/App.vue index cf6daa8e..c2f8d733 100644 --- a/examples/vue/column-pinning-split/src/App.vue +++ b/examples/vue/column-pinning-split/src/App.vue @@ -71,20 +71,17 @@ const columns = ref( ]), ) -const table = useTable( - { - features, - rowModels: { - paginatedRowModel: createPaginatedRowModel(), - }, - data, - get columns() { - return columns.value - }, - debugTable: true, +const table = useTable({ + features, + rowModels: { + paginatedRowModel: createPaginatedRowModel(), }, - (state) => ({ pagination: state.pagination }), -) + data, + get columns() { + return columns.value + }, + debugTable: true, +}) const refreshData = () => { data.value = makeData(1_000) diff --git a/examples/vue/column-pinning-sticky/src/App.vue b/examples/vue/column-pinning-sticky/src/App.vue index cf6daa8e..c2f8d733 100644 --- a/examples/vue/column-pinning-sticky/src/App.vue +++ b/examples/vue/column-pinning-sticky/src/App.vue @@ -71,20 +71,17 @@ const columns = ref( ]), ) -const table = useTable( - { - features, - rowModels: { - paginatedRowModel: createPaginatedRowModel(), - }, - data, - get columns() { - return columns.value - }, - debugTable: true, +const table = useTable({ + features, + rowModels: { + paginatedRowModel: createPaginatedRowModel(), }, - (state) => ({ pagination: state.pagination }), -) + data, + get columns() { + return columns.value + }, + debugTable: true, +}) const refreshData = () => { data.value = makeData(1_000) diff --git a/examples/vue/column-pinning/src/App.vue b/examples/vue/column-pinning/src/App.vue index 6ef670d0..402faabb 100644 --- a/examples/vue/column-pinning/src/App.vue +++ b/examples/vue/column-pinning/src/App.vue @@ -82,23 +82,16 @@ const stressTest = () => { data.value = makeData(500_000) } -const table = useTable( - { - features, - data, - get columns() { - return columns.value - }, - debugTable: true, - debugHeaders: true, - debugColumns: true, +const table = useTable({ + features, + data, + get columns() { + return columns.value }, - (state) => ({ - columnOrder: state.columnOrder, - columnPinning: state.columnPinning, - columnVisibility: state.columnVisibility, - }), -) + debugTable: true, + debugHeaders: true, + debugColumns: true, +}) const randomizeColumns = () => { table.setColumnOrder( diff --git a/examples/vue/column-resizing-performant/src/App.vue b/examples/vue/column-resizing-performant/src/App.vue index 887bee27..b0600498 100644 --- a/examples/vue/column-resizing-performant/src/App.vue +++ b/examples/vue/column-resizing-performant/src/App.vue @@ -71,20 +71,17 @@ const columns = ref( ]), ) -const table = useTable( - { - features, - rowModels: { - paginatedRowModel: createPaginatedRowModel(), - }, - data, - get columns() { - return columns.value - }, - debugTable: true, +const table = useTable({ + features, + rowModels: { + paginatedRowModel: createPaginatedRowModel(), }, - (state) => ({ pagination: state.pagination }), -) + data, + get columns() { + return columns.value + }, + debugTable: true, +}) const refreshData = () => { data.value = makeData(1_000) diff --git a/examples/vue/column-resizing/src/App.vue b/examples/vue/column-resizing/src/App.vue index cf6daa8e..c2f8d733 100644 --- a/examples/vue/column-resizing/src/App.vue +++ b/examples/vue/column-resizing/src/App.vue @@ -71,20 +71,17 @@ const columns = ref( ]), ) -const table = useTable( - { - features, - rowModels: { - paginatedRowModel: createPaginatedRowModel(), - }, - data, - get columns() { - return columns.value - }, - debugTable: true, +const table = useTable({ + features, + rowModels: { + paginatedRowModel: createPaginatedRowModel(), }, - (state) => ({ pagination: state.pagination }), -) + data, + get columns() { + return columns.value + }, + debugTable: true, +}) const refreshData = () => { data.value = makeData(1_000) diff --git a/examples/vue/column-sizing/src/App.vue b/examples/vue/column-sizing/src/App.vue index cf6daa8e..c2f8d733 100644 --- a/examples/vue/column-sizing/src/App.vue +++ b/examples/vue/column-sizing/src/App.vue @@ -71,20 +71,17 @@ const columns = ref( ]), ) -const table = useTable( - { - features, - rowModels: { - paginatedRowModel: createPaginatedRowModel(), - }, - data, - get columns() { - return columns.value - }, - debugTable: true, +const table = useTable({ + features, + rowModels: { + paginatedRowModel: createPaginatedRowModel(), }, - (state) => ({ pagination: state.pagination }), -) + data, + get columns() { + return columns.value + }, + debugTable: true, +}) const refreshData = () => { data.value = makeData(1_000) diff --git a/examples/vue/filters-faceted/src/App.vue b/examples/vue/filters-faceted/src/App.vue index cf6daa8e..c2f8d733 100644 --- a/examples/vue/filters-faceted/src/App.vue +++ b/examples/vue/filters-faceted/src/App.vue @@ -71,20 +71,17 @@ const columns = ref( ]), ) -const table = useTable( - { - features, - rowModels: { - paginatedRowModel: createPaginatedRowModel(), - }, - data, - get columns() { - return columns.value - }, - debugTable: true, +const table = useTable({ + features, + rowModels: { + paginatedRowModel: createPaginatedRowModel(), }, - (state) => ({ pagination: state.pagination }), -) + data, + get columns() { + return columns.value + }, + debugTable: true, +}) const refreshData = () => { data.value = makeData(1_000) diff --git a/examples/vue/filters-fuzzy/src/App.vue b/examples/vue/filters-fuzzy/src/App.vue index cf6daa8e..c2f8d733 100644 --- a/examples/vue/filters-fuzzy/src/App.vue +++ b/examples/vue/filters-fuzzy/src/App.vue @@ -71,20 +71,17 @@ const columns = ref( ]), ) -const table = useTable( - { - features, - rowModels: { - paginatedRowModel: createPaginatedRowModel(), - }, - data, - get columns() { - return columns.value - }, - debugTable: true, +const table = useTable({ + features, + rowModels: { + paginatedRowModel: createPaginatedRowModel(), }, - (state) => ({ pagination: state.pagination }), -) + data, + get columns() { + return columns.value + }, + debugTable: true, +}) const refreshData = () => { data.value = makeData(1_000) diff --git a/examples/vue/filters/src/App.vue b/examples/vue/filters/src/App.vue index 981fb4cd..02161e4c 100644 --- a/examples/vue/filters/src/App.vue +++ b/examples/vue/filters/src/App.vue @@ -70,20 +70,13 @@ const stressTest = () => { data.value = makeData(200_000) } -const table = useAppTable( - { - debugTable: true, - data, - get columns() { - return columns.value - }, +const table = useAppTable({ + debugTable: true, + data, + get columns() { + return columns.value }, - (state) => ({ - columnFilters: state.columnFilters, - globalFilter: state.globalFilter, - pagination: state.pagination, - }), -) +}) function handleGoToPage(e: any) { const page = e.target.value ? Number(e.target.value) - 1 : 0 diff --git a/examples/vue/grouping/src/App.vue b/examples/vue/grouping/src/App.vue index cf6daa8e..c2f8d733 100644 --- a/examples/vue/grouping/src/App.vue +++ b/examples/vue/grouping/src/App.vue @@ -71,20 +71,17 @@ const columns = ref( ]), ) -const table = useTable( - { - features, - rowModels: { - paginatedRowModel: createPaginatedRowModel(), - }, - data, - get columns() { - return columns.value - }, - debugTable: true, +const table = useTable({ + features, + rowModels: { + paginatedRowModel: createPaginatedRowModel(), }, - (state) => ({ pagination: state.pagination }), -) + data, + get columns() { + return columns.value + }, + debugTable: true, +}) const refreshData = () => { data.value = makeData(1_000) diff --git a/examples/vue/kitchen-sink/src/App.vue b/examples/vue/kitchen-sink/src/App.vue index 93c11414..5b6c20ca 100644 --- a/examples/vue/kitchen-sink/src/App.vue +++ b/examples/vue/kitchen-sink/src/App.vue @@ -161,41 +161,38 @@ const columns = ref( const data = ref(makeData(1_000)) -const table = useTable( - { - key: 'kitchen-sink', // needed for devtools - features: stockFeatures, - rowModels: { - expandedRowModel: createExpandedRowModel(), - filteredRowModel: createFilteredRowModel({ - ...filterFns, - fuzzy: fuzzyFilter, - }), - facetedRowModel: createFacetedRowModel(), - facetedMinMaxValues: createFacetedMinMaxValues(), - facetedUniqueValues: createFacetedUniqueValues(), - groupedRowModel: createGroupedRowModel(aggregationFns), - paginatedRowModel: createPaginatedRowModel(), - sortedRowModel: createSortedRowModel(sortFns), - }, - data, - get columns() { - return columns.value - }, - getSubRows: (row: Person) => row.subRows, - globalFilterFn: 'fuzzy', - columnResizeMode: 'onChange', - defaultColumn: { minSize: 200, maxSize: 800 }, - initialState: { - columnOrder: columns.value.map((c) => c.id!), - columnPinning: { left: ['select'], right: [] }, - pagination: { pageIndex: 0, pageSize: 20 }, - }, - keepPinnedRows: true, - debugTable: true, +const table = useTable({ + key: 'kitchen-sink', // needed for devtools + features: stockFeatures, + rowModels: { + expandedRowModel: createExpandedRowModel(), + filteredRowModel: createFilteredRowModel({ + ...filterFns, + fuzzy: fuzzyFilter, + }), + facetedRowModel: createFacetedRowModel(), + facetedMinMaxValues: createFacetedMinMaxValues(), + facetedUniqueValues: createFacetedUniqueValues(), + groupedRowModel: createGroupedRowModel(aggregationFns), + paginatedRowModel: createPaginatedRowModel(), + sortedRowModel: createSortedRowModel(sortFns), }, - (state) => state, -) + data, + get columns() { + return columns.value + }, + getSubRows: (row: Person) => row.subRows, + globalFilterFn: 'fuzzy', + columnResizeMode: 'onChange', + defaultColumn: { minSize: 200, maxSize: 800 }, + initialState: { + columnOrder: columns.value.map((c) => c.id!), + columnPinning: { left: ['select'], right: [] }, + pagination: { pageIndex: 0, pageSize: 20 }, + }, + keepPinnedRows: true, + debugTable: true, +}) useTanStackTableDevtools(table) diff --git a/examples/vue/pagination/src/App.vue b/examples/vue/pagination/src/App.vue index cf6daa8e..c2f8d733 100644 --- a/examples/vue/pagination/src/App.vue +++ b/examples/vue/pagination/src/App.vue @@ -71,20 +71,17 @@ const columns = ref( ]), ) -const table = useTable( - { - features, - rowModels: { - paginatedRowModel: createPaginatedRowModel(), - }, - data, - get columns() { - return columns.value - }, - debugTable: true, +const table = useTable({ + features, + rowModels: { + paginatedRowModel: createPaginatedRowModel(), }, - (state) => ({ pagination: state.pagination }), -) + data, + get columns() { + return columns.value + }, + debugTable: true, +}) const refreshData = () => { data.value = makeData(1_000) diff --git a/examples/vue/row-pinning/src/App.vue b/examples/vue/row-pinning/src/App.vue index cf6daa8e..c2f8d733 100644 --- a/examples/vue/row-pinning/src/App.vue +++ b/examples/vue/row-pinning/src/App.vue @@ -71,20 +71,17 @@ const columns = ref( ]), ) -const table = useTable( - { - features, - rowModels: { - paginatedRowModel: createPaginatedRowModel(), - }, - data, - get columns() { - return columns.value - }, - debugTable: true, +const table = useTable({ + features, + rowModels: { + paginatedRowModel: createPaginatedRowModel(), }, - (state) => ({ pagination: state.pagination }), -) + data, + get columns() { + return columns.value + }, + debugTable: true, +}) const refreshData = () => { data.value = makeData(1_000) diff --git a/examples/vue/row-selection/src/App.vue b/examples/vue/row-selection/src/App.vue index f694cfb1..f41cd60a 100644 --- a/examples/vue/row-selection/src/App.vue +++ b/examples/vue/row-selection/src/App.vue @@ -104,22 +104,19 @@ const toggleRowSelection = () => { enableRowSelection.value = !enableRowSelection.value } -const table = useTable( - { - key: 'row-selection', // needed for devtools - features, - rowModels: {}, - data, - columns, - debugTable: true, - // enable row selection for all rows - get enableRowSelection() { - return enableRowSelection.value - }, - // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row +const table = useTable({ + key: 'row-selection', // needed for devtools + features, + rowModels: {}, + data, + columns, + debugTable: true, + // enable row selection for all rows + get enableRowSelection() { + return enableRowSelection.value }, - (state) => ({ rowSelection: state.rowSelection }), -) + // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row +}) useTanStackTableDevtools(table) diff --git a/examples/vue/sorting/src/App.vue b/examples/vue/sorting/src/App.vue index 5ec0d014..6730f4fc 100644 --- a/examples/vue/sorting/src/App.vue +++ b/examples/vue/sorting/src/App.vue @@ -57,18 +57,15 @@ const stressTest = () => { data.value = makeData(500_000) } -const table = useTable( - { - features, - rowModels: { - sortedRowModel: createSortedRowModel(sortFns), - }, - data, - columns, - debugTable: true, +const table = useTable({ + features, + rowModels: { + sortedRowModel: createSortedRowModel(sortFns), }, - (state) => ({ sorting: state.sorting }), -) + data, + columns, + debugTable: true, +})