diff --git a/eslint.config.js b/eslint.config.js index bc1ea7f4f0..cff518414a 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -2,11 +2,15 @@ // @ts-ignore Needed due to moduleResolution Node vs Bundler import { tanstackConfig } from '@tanstack/config/eslint' +import unusedImports from 'eslint-plugin-unused-imports' export default [ ...tanstackConfig, { name: 'tanstack/temp', + plugins: { + 'unused-imports': unusedImports, + }, rules: { 'no-case-declarations': 'off', 'no-shadow': 'off', @@ -14,6 +18,7 @@ export default [ '@typescript-eslint/no-empty-function': 'off', '@typescript-eslint/no-unnecessary-condition': 'warn', '@typescript-eslint/no-unsafe-function-type': 'off', + 'unused-imports/no-unused-imports': 'warn', }, }, ] diff --git a/examples/angular/column-pinning-sticky/src/app/app.component.ts b/examples/angular/column-pinning-sticky/src/app/app.component.ts index 11f87b8c52..ec0b1cc62f 100644 --- a/examples/angular/column-pinning-sticky/src/app/app.component.ts +++ b/examples/angular/column-pinning-sticky/src/app/app.component.ts @@ -1,5 +1,4 @@ import { - ChangeDetectionStrategy, Component, computed, signal, diff --git a/examples/angular/filters/src/app/app.component.ts b/examples/angular/filters/src/app/app.component.ts index d9b577ad5f..88d18b9815 100644 --- a/examples/angular/filters/src/app/app.component.ts +++ b/examples/angular/filters/src/app/app.component.ts @@ -86,7 +86,7 @@ export class AppComponent { : this.columnFilters.set(updater) }, getCoreRowModel: createCoreRowModel(), - getFilteredRowModel: createFilteredRowModel(), //client-side filtering + getFilteredRowModel: createFilteredRowModel(), // client-side filtering getSortedRowModel: createSortedRowModel(), getPaginatedRowModel: createPaginatedRowModel(), getFacetedRowModel: createFacetedRowModel(), // client-side faceting diff --git a/examples/angular/filters/src/app/table-filter.component.ts b/examples/angular/filters/src/app/table-filter.component.ts index 6cede7dddd..e770805afa 100644 --- a/examples/angular/filters/src/app/table-filter.component.ts +++ b/examples/angular/filters/src/app/table-filter.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common' -import { Component, OnInit, computed, input } from '@angular/core' +import { Component, computed, input } from '@angular/core' import { DebouncedInputDirective } from './debounced-input.directive' import type { CellData, @@ -10,7 +10,7 @@ import type { } from '@tanstack/angular-table' declare module '@tanstack/angular-table' { - //allows us to define custom properties for our columns + // allows us to define custom properties for our columns interface ColumnMeta< TFeatures extends TableFeatures, TFns extends Fns, diff --git a/examples/angular/row-selection-signal/src/app/selection-column.component.ts b/examples/angular/row-selection-signal/src/app/selection-column.component.ts index 76fac142a3..50d057b84c 100644 --- a/examples/angular/row-selection-signal/src/app/selection-column.component.ts +++ b/examples/angular/row-selection-signal/src/app/selection-column.component.ts @@ -23,8 +23,8 @@ export class TableHeadSelectionComponent { // You can define and use the table field, which is defined in HeaderContext. // Please take note that only signal based input is supported. - //column = input.required>() - //header = input.required>() + // column = input.required>() + // header = input.required>() table = input.required>() } diff --git a/examples/lit/column-sizing/src/main.ts b/examples/lit/column-sizing/src/main.ts index 65423d6aed..421c8745d6 100644 --- a/examples/lit/column-sizing/src/main.ts +++ b/examples/lit/column-sizing/src/main.ts @@ -41,7 +41,7 @@ const columns: Array> = [ { accessorKey: 'rank', header: 'Rank', - invertSorting: true, //invert the sorting order (golf score-like where smaller is better) + invertSorting: true, // invert the sorting order (golf score-like where smaller is better) }, { accessorKey: 'createdAt', diff --git a/examples/lit/filters/src/main.ts b/examples/lit/filters/src/main.ts index 7dcd2517ef..5acf26d65e 100644 --- a/examples/lit/filters/src/main.ts +++ b/examples/lit/filters/src/main.ts @@ -68,7 +68,7 @@ const columns: Array> = [ ] declare module '@tanstack/lit-table' { - //allows us to define custom properties for our columns + // allows us to define custom properties for our columns interface ColumnMeta< TFeatures extends TableFeatures, TFns extends Fns, @@ -164,7 +164,7 @@ class LitTableExample extends LitElement { } }, getCoreRowModel: createCoreRowModel(), - getFilteredRowModel: createFilteredRowModel(), //client side filtering + getFilteredRowModel: createFilteredRowModel(), // client side filtering getSortedRowModel: createSortedRowModel(), getPaginatedRowModel: createPaginatedRowModel(), debugTable: true, diff --git a/examples/lit/row-selection/src/main.ts b/examples/lit/row-selection/src/main.ts index 538120724b..d11a3dcb62 100644 --- a/examples/lit/row-selection/src/main.ts +++ b/examples/lit/row-selection/src/main.ts @@ -1,4 +1,4 @@ -import { customElement, property, state } from 'lit/decorators.js' +import { customElement, state } from 'lit/decorators.js' import { LitElement, html } from 'lit' import { repeat } from 'lit/directives/repeat.js' import { diff --git a/examples/lit/sorting/src/main.ts b/examples/lit/sorting/src/main.ts index ce3cd03003..0d1b3cb9cf 100644 --- a/examples/lit/sorting/src/main.ts +++ b/examples/lit/sorting/src/main.ts @@ -22,30 +22,30 @@ const columns: Array> = [ { accessorKey: 'firstName', cell: (info) => info.getValue(), - //this column will sort in ascending order by default since it is a string column + // this column will sort in ascending order by default since it is a string column }, { accessorFn: (row) => row.lastName, id: 'lastName', cell: (info) => info.getValue(), header: () => html`Last Name`, - sortUndefined: 'last', //force undefined values to the end - sortDescFirst: false, //first sort order will be ascending (nullable values can mess up auto detection of sort order) + sortUndefined: 'last', // force undefined values to the end + sortDescFirst: false, // first sort order will be ascending (nullable values can mess up auto detection of sort order) }, { accessorKey: 'age', header: () => 'Age', - //this column will sort in descending order by default since it is a number column + // this column will sort in descending order by default since it is a number column }, { accessorKey: 'visits', header: () => html`Visits`, - sortUndefined: 'last', //force undefined values to the end + sortUndefined: 'last', // force undefined values to the end }, { accessorKey: 'status', header: 'Status', - sortingFn: sortStatusFn, //use our custom sorting function for this enum column + sortingFn: sortStatusFn, // use our custom sorting function for this enum column }, { accessorKey: 'progress', @@ -55,7 +55,7 @@ const columns: Array> = [ { accessorKey: 'rank', header: 'Rank', - invertSorting: true, //invert the sorting order (golf score-like where smaller is better) + invertSorting: true, // invert the sorting order (golf score-like where smaller is better) }, { accessorKey: 'createdAt', diff --git a/examples/lit/virtualized-rows/src/main.ts b/examples/lit/virtualized-rows/src/main.ts index a4c5dc2c11..c878964212 100644 --- a/examples/lit/virtualized-rows/src/main.ts +++ b/examples/lit/virtualized-rows/src/main.ts @@ -92,9 +92,9 @@ class LitTableExample extends LitElement { class="container" ${ref(this.tableContainerRef)} style="${styleMap({ - overflow: 'auto', //our scrollable table container - position: 'relative', //needed for sticky header - height: '800px', //should be a fixed height + overflow: 'auto', // our scrollable table container + position: 'relative', // needed for sticky header + height: '800px', // should be a fixed height })}" > @@ -139,8 +139,8 @@ class LitTableExample extends LitElement { ${repeat( diff --git a/examples/qwik/row-selection/src/main.tsx b/examples/qwik/row-selection/src/main.tsx index f4d102d37a..c5422f0306 100644 --- a/examples/qwik/row-selection/src/main.tsx +++ b/examples/qwik/row-selection/src/main.tsx @@ -155,7 +155,7 @@ const App = component$(() => {
{ - const thisCol = table.getColumn(id)! //avoid serialization error + const thisCol = table.getColumn(id)! // avoid serialization error thisCol.toggleSorting() })} colSpan={header.colSpan} diff --git a/examples/qwik/sorting/src/main.tsx b/examples/qwik/sorting/src/main.tsx index 6c72a6e33d..8b1706b5af 100644 --- a/examples/qwik/sorting/src/main.tsx +++ b/examples/qwik/sorting/src/main.tsx @@ -101,7 +101,7 @@ const App = component$(() => { : '' } onClick$={$((event) => { - const col = table.getColumn(id)! //avoid serializing errors + const col = table.getColumn(id)! // avoid serializing errors col.getToggleSortingHandler()!(event) })} title={ diff --git a/examples/react/column-dnd/src/main.tsx b/examples/react/column-dnd/src/main.tsx index e5acf482fd..b40d8f3e2a 100644 --- a/examples/react/column-dnd/src/main.tsx +++ b/examples/react/column-dnd/src/main.tsx @@ -164,7 +164,7 @@ function App() { setColumnOrder((prevColumnOrder) => { const oldIndex = prevColumnOrder.indexOf(active.id as string) const newIndex = prevColumnOrder.indexOf(over.id as string) - return arrayMove(prevColumnOrder, oldIndex, newIndex) //this is just a splice util + return arrayMove(prevColumnOrder, oldIndex, newIndex) // this is just a splice util }) } } diff --git a/examples/react/column-pinning-sticky/src/main.tsx b/examples/react/column-pinning-sticky/src/main.tsx index 68f650848e..5ea1fa3d99 100644 --- a/examples/react/column-pinning-sticky/src/main.tsx +++ b/examples/react/column-pinning-sticky/src/main.tsx @@ -21,9 +21,9 @@ const _features = tableFeatures({ ColumnOrdering, }) -//These are the important styles to make sticky column pinning work! -//Apply styles like this using your CSS strategy of choice with this kind of logic to head cells, data cells, footer cells, etc. -//View the index.css file for more needed styles such as border-collapse: separate +// These are the important styles to make sticky column pinning work! +// Apply styles like this using your CSS strategy of choice with this kind of logic to head cells, data cells, footer cells, etc. +// View the index.css file for more needed styles such as border-collapse: separate const getCommonPinningStyles = (column: Column): CSSProperties => { const isPinned = column.getIsPinned() const isLastLeftPinnedColumn = @@ -174,7 +174,7 @@ function App() {
@@ -245,7 +245,7 @@ function App() { return (
{flexRender( diff --git a/examples/react/column-resizing-performant/src/main.tsx b/examples/react/column-resizing-performant/src/main.tsx index 4e97afe90c..0577b52106 100644 --- a/examples/react/column-resizing-performant/src/main.tsx +++ b/examples/react/column-resizing-performant/src/main.tsx @@ -108,7 +108,7 @@ function App() { return colSizes }, [table.getState().columnResizing, table.getState().columnSizing]) - //demo purposes + // demo purposes const [enableMemo, setEnableMemo] = React.useState(true) return ( @@ -146,7 +146,7 @@ function App() { {...{ className: 'divTable', style: { - ...columnSizeVars, //Define column sizes on the element + ...columnSizeVars, // Define column sizes on the
element width: table.getTotalSize(), }, }} @@ -202,7 +202,7 @@ function App() { ) } -//un-memoized normal table body component - see memoized version below +// un-memoized normal table body component - see memoized version below function TableBody({ table }: { table: Table }) { return (
}) { }} > {row.getVisibleCells().map((cell) => { - //simulate expensive render + // simulate expensive render for (const _ of Array(10000)) { Math.random() } @@ -243,7 +243,7 @@ function TableBody({ table }: { table: Table }) { ) } -//special memoized wrapper for our table body that we will use during column resizing +// special memoized wrapper for our table body that we will use during column resizing export const MemoizedTableBody = React.memo( TableBody, (prev, next) => prev.table.options.data === next.table.options.data, diff --git a/examples/react/custom-features/src/main.tsx b/examples/react/custom-features/src/main.tsx index 55f3e61603..b774fff9d0 100644 --- a/examples/react/custom-features/src/main.tsx +++ b/examples/react/custom-features/src/main.tsx @@ -4,7 +4,6 @@ import ReactDOM from 'react-dom/client' import './index.css' import { - createCoreRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, @@ -49,15 +48,15 @@ export interface DensityInstance { // Use declaration merging to add our new feature APIs and state types to TanStack Table's existing types. declare module '@tanstack/react-table' { - //merge our new feature's state with the existing table state + // merge our new feature's state with the existing table state interface TableState extends DensityTableState {} - //merge our new feature's options with the existing table options + // merge our new feature's options with the existing table options interface TableOptions< TFeatures extends TableFeatures, TFns extends Fns, TData extends RowData, > extends DensityOptions {} - //merge our new feature's instance APIs with the existing table instance APIs + // merge our new feature's instance APIs with the existing table instance APIs interface Table< TFeatures extends TableFeatures, TFns extends Fns, @@ -124,7 +123,7 @@ export const DensityFeature: TableFeature = { table.toggleDensity = (value) => { table.setDensity((old) => { if (value) return value - return old === 'lg' ? 'md' : old === 'md' ? 'sm' : 'lg' //cycle through the 3 options + return old === 'lg' ? 'md' : old === 'md' ? 'sm' : 'lg' // cycle through the 3 options }) } }, @@ -138,9 +137,9 @@ export const DensityFeature: TableFeature = { // if you need to add header instance APIs... // constructHeader: , TData extends RowData>(header, table): void => {}, } -//end of custom feature code +// end of custom feature code -//app code +// app code function App() { const columns = React.useMemo>>( () => [ @@ -184,7 +183,7 @@ function App() { const [density, setDensity] = React.useState('md') const table = useTable({ - _features: { DensityFeature }, //pass our custom feature to the table to be instantiated upon creation + _features: { DensityFeature }, // pass our custom feature to the table to be instantiated upon creation _rowModels: { Filtered: createFilteredRowModel(), Paginated: createPaginatedRowModel(), @@ -194,9 +193,9 @@ function App() { data, debugTable: true, state: { - density, //passing the density state to the table, TS is still happy :) + density, // passing the density state to the table, TS is still happy :) }, - onDensityChange: setDensity, //using the new onDensityChange option, TS is still happy :) + onDensityChange: setDensity, // using the new onDensityChange option, TS is still happy :) }) return ( @@ -218,7 +217,7 @@ function App() { key={header.id} colSpan={header.colSpan} style={{ - //using our new feature + // using our new feature padding: density === 'sm' ? '4px' @@ -265,7 +264,7 @@ function App() {
@@ -159,8 +158,8 @@ function App() { {virtualRows.map((virtualRow) => { @@ -169,18 +168,18 @@ function App() { return ( rowVirtualizer.measureElement(node)} //measure dynamic row height + data-index={virtualRow.index} // needed for dynamic row height measurement + ref={(node) => rowVirtualizer.measureElement(node)} // measure dynamic row height key={row.id} style={{ display: 'flex', position: 'absolute', - transform: `translateY(${virtualRow.start}px)`, //this should always be a `style` as it changes on scroll + transform: `translateY(${virtualRow.start}px)`, // this should always be a `style` as it changes on scroll width: '100%', }} > {virtualPaddingLeft ? ( - //fake empty column to the left for virtualization scroll padding + // fake empty column to the left for virtualization scroll padding {rowVirtualizer.getVirtualItems().map((virtualRow) => { const row = rows[virtualRow.index] return ( rowVirtualizer.measureElement(node)} //measure dynamic row height + data-index={virtualRow.index} // needed for dynamic row height measurement + ref={(node) => rowVirtualizer.measureElement(node)} // measure dynamic row height key={row.id} style={{ display: 'flex', position: 'absolute', - transform: `translateY(${virtualRow.start}px)`, //this should always be a `style` as it changes on scroll + transform: `translateY(${virtualRow.start}px)`, // this should always be a `style` as it changes on scroll width: '100%', }} > diff --git a/examples/react/virtualized-infinite-scrolling/src/makeData.ts b/examples/react/virtualized-infinite-scrolling/src/makeData.ts index ef1f41e723..ee8bd2efdb 100644 --- a/examples/react/virtualized-infinite-scrolling/src/makeData.ts +++ b/examples/react/virtualized-infinite-scrolling/src/makeData.ts @@ -1,5 +1,5 @@ import { faker } from '@faker-js/faker' -import type { ColumnSort, SortingState } from '@tanstack/react-table' +import type { SortingState } from '@tanstack/react-table' export type Person = { id: number @@ -59,7 +59,7 @@ export function makeData(...lens: Array) { const data = makeData(1000) -//simulates a backend api +// simulates a backend api export const fetchData = async ( start: number, size: number, @@ -77,7 +77,7 @@ export const fetchData = async ( }) } - //simulate a backend api + // simulate a backend api await new Promise((resolve) => setTimeout(resolve, 200)) return { diff --git a/examples/react/virtualized-rows/src/main.tsx b/examples/react/virtualized-rows/src/main.tsx index 4ae9509f5a..151f8ed613 100644 --- a/examples/react/virtualized-rows/src/main.tsx +++ b/examples/react/virtualized-rows/src/main.tsx @@ -6,7 +6,6 @@ import './index.css' import { ColumnSizing, RowSorting, - createCoreRowModel, createSortedRowModel, flexRender, useTable, @@ -18,8 +17,8 @@ import { makeData } from './makeData' import type { Person } from './makeData' import type { ColumnDef } from '@tanstack/react-table' -//This is a dynamic row height example, which is more complicated, but allows for a more realistic table. -//See https://tanstack.com/virtual/v3/docs/examples/react/table for a simpler fixed row height example. +// This is a dynamic row height example, which is more complicated, but allows for a more realistic table. +// See https://tanstack.com/virtual/v3/docs/examples/react/table for a simpler fixed row height example. function App() { const columns = React.useMemo>>( () => [ @@ -79,14 +78,14 @@ function App() { const { rows } = table.getRowModel() - //The virtualizer needs to know the scrollable container element + // The virtualizer needs to know the scrollable container element const tableContainerRef = React.useRef(null) const rowVirtualizer = useVirtualizer({ count: rows.length, - estimateSize: () => 33, //estimate row height for accurate scrollbar dragging + estimateSize: () => 33, // estimate row height for accurate scrollbar dragging getScrollElement: () => tableContainerRef.current, - //measure dynamic row height, except in firefox because it measures table border height incorrectly + // measure dynamic row height, except in firefox because it measures table border height incorrectly measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 @@ -95,7 +94,7 @@ function App() { overscan: 5, }) - //All important CSS styles are included as inline styles for this example. This is not recommended for your code. + // All important CSS styles are included as inline styles for this example. This is not recommended for your code. return (
{process.env.NODE_ENV === 'development' ? ( @@ -110,9 +109,9 @@ function App() { className="container" ref={tableContainerRef} style={{ - overflow: 'auto', //our scrollable table container - position: 'relative', //needed for sticky header - height: '800px', //should be a fixed height + overflow: 'auto', // our scrollable table container + position: 'relative', // needed for sticky header + height: '800px', // should be a fixed height }} > {/* Even though we're still using sematic table tags, we must use CSS grid and flexbox for dynamic row heights */} @@ -165,21 +164,21 @@ function App() {
{rowVirtualizer.getVirtualItems().map((virtualRow) => { const row = rows[virtualRow.index] return ( rowVirtualizer.measureElement(node)} //measure dynamic row height + data-index={virtualRow.index} // needed for dynamic row height measurement + ref={(node) => rowVirtualizer.measureElement(node)} // measure dynamic row height key={row.id} style={{ display: 'flex', position: 'absolute', - transform: `translateY(${virtualRow.start}px)`, //this should always be a `style` as it changes on scroll + transform: `translateY(${virtualRow.start}px)`, // this should always be a `style` as it changes on scroll width: '100%', }} > diff --git a/examples/vue/basic/src/env.d.ts b/examples/vue/basic/src/env.d.ts index aafef9509d..f5e6ee3b3c 100644 --- a/examples/vue/basic/src/env.d.ts +++ b/examples/vue/basic/src/env.d.ts @@ -2,7 +2,7 @@ declare module '*.vue' { import type { DefineComponent } from 'vue' - // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types + // eslint-disable-next-line @typescript-eslint/ban-types const component: DefineComponent<{}, {}, any> export default component } diff --git a/examples/vue/column-ordering/src/env.d.ts b/examples/vue/column-ordering/src/env.d.ts index aafef9509d..f5e6ee3b3c 100644 --- a/examples/vue/column-ordering/src/env.d.ts +++ b/examples/vue/column-ordering/src/env.d.ts @@ -2,7 +2,7 @@ declare module '*.vue' { import type { DefineComponent } from 'vue' - // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types + // eslint-disable-next-line @typescript-eslint/ban-types const component: DefineComponent<{}, {}, any> export default component } diff --git a/examples/vue/column-pinning/src/env.d.ts b/examples/vue/column-pinning/src/env.d.ts index aafef9509d..f5e6ee3b3c 100644 --- a/examples/vue/column-pinning/src/env.d.ts +++ b/examples/vue/column-pinning/src/env.d.ts @@ -2,7 +2,7 @@ declare module '*.vue' { import type { DefineComponent } from 'vue' - // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types + // eslint-disable-next-line @typescript-eslint/ban-types const component: DefineComponent<{}, {}, any> export default component } diff --git a/examples/vue/pagination-controlled/src/env.d.ts b/examples/vue/pagination-controlled/src/env.d.ts index aafef9509d..f5e6ee3b3c 100644 --- a/examples/vue/pagination-controlled/src/env.d.ts +++ b/examples/vue/pagination-controlled/src/env.d.ts @@ -2,7 +2,7 @@ declare module '*.vue' { import type { DefineComponent } from 'vue' - // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types + // eslint-disable-next-line @typescript-eslint/ban-types const component: DefineComponent<{}, {}, any> export default component } diff --git a/examples/vue/pagination/src/env.d.ts b/examples/vue/pagination/src/env.d.ts index aafef9509d..f5e6ee3b3c 100644 --- a/examples/vue/pagination/src/env.d.ts +++ b/examples/vue/pagination/src/env.d.ts @@ -2,7 +2,7 @@ declare module '*.vue' { import type { DefineComponent } from 'vue' - // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types + // eslint-disable-next-line @typescript-eslint/ban-types const component: DefineComponent<{}, {}, any> export default component } diff --git a/examples/vue/row-selection/src/env.d.ts b/examples/vue/row-selection/src/env.d.ts index aafef9509d..f5e6ee3b3c 100644 --- a/examples/vue/row-selection/src/env.d.ts +++ b/examples/vue/row-selection/src/env.d.ts @@ -2,7 +2,7 @@ declare module '*.vue' { import type { DefineComponent } from 'vue' - // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types + // eslint-disable-next-line @typescript-eslint/ban-types const component: DefineComponent<{}, {}, any> export default component } diff --git a/examples/vue/sorting/src/env.d.ts b/examples/vue/sorting/src/env.d.ts index aafef9509d..f5e6ee3b3c 100644 --- a/examples/vue/sorting/src/env.d.ts +++ b/examples/vue/sorting/src/env.d.ts @@ -2,7 +2,7 @@ declare module '*.vue' { import type { DefineComponent } from 'vue' - // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types + // eslint-disable-next-line @typescript-eslint/ban-types const component: DefineComponent<{}, {}, any> export default component } diff --git a/package.json b/package.json index f40c33c76e..6ad3b0ce3f 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "@testing-library/react-hooks": "^8.0.1", "@types/node": "^22.7.4", "eslint": "^9.11.1", + "eslint-plugin-unused-imports": "^4.1.4", "jsdom": "^25.0.1", "knip": "^5.30.6", "nx": "^19.8.2", diff --git a/packages/table-core/src/types/TableFeatures.ts b/packages/table-core/src/types/TableFeatures.ts index 2f82e6da26..58f980e3cc 100644 --- a/packages/table-core/src/types/TableFeatures.ts +++ b/packages/table-core/src/types/TableFeatures.ts @@ -1,12 +1,12 @@ import type { Fns } from './Fns' import type { CellData, RowData } from './type-utils' -import type { ColumnDef, ColumnDefBase_All } from './ColumnDef' +import type { ColumnDefBase_All } from './ColumnDef' import type { Cell } from './Cell' import type { Column } from './Column' import type { Header } from './Header' import type { Row } from './Row' import type { Table } from './Table' -import type { TableOptions, TableOptions_All } from './TableOptions' +import type { TableOptions_All } from './TableOptions' import type { TableState } from './TableState' export interface TableFeature { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9a78b88090..7c447c350b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ importers: eslint: specifier: ^9.11.1 version: 9.11.1(jiti@1.21.6) + eslint-plugin-unused-imports: + specifier: ^4.1.4 + version: 4.1.4(@typescript-eslint/eslint-plugin@8.7.0(@typescript-eslint/parser@8.7.0(eslint@9.11.1(jiti@1.21.6))(typescript@5.6.2))(eslint@9.11.1(jiti@1.21.6))(typescript@5.6.2))(eslint@9.11.1(jiti@1.21.6)) jsdom: specifier: ^25.0.1 version: 25.0.1 @@ -7036,6 +7039,15 @@ packages: svelte: optional: true + eslint-plugin-unused-imports@4.1.4: + resolution: {integrity: sha512-YptD6IzQjDardkl0POxnnRBhU1OEePMV0nd6siHaRBbd+lyh6NAhFEobiznKU7kTsSsDeSD62Pe7kAM1b7dAZQ==} + peerDependencies: + '@typescript-eslint/eslint-plugin': ^8.0.0-0 || ^7.0.0 || ^6.0.0 || ^5.0.0 + eslint: ^9.0.0 || ^8.0.0 + peerDependenciesMeta: + '@typescript-eslint/eslint-plugin': + optional: true + eslint-plugin-vue@9.28.0: resolution: {integrity: sha512-ShrihdjIhOTxs+MfWun6oJWuk+g/LAhN+CiuOl/jjkG3l0F2AuK5NMTaWqyvBgkFtpYmyks6P4603mLmhNJW8g==} engines: {node: ^14.17.0 || >=16.0.0} @@ -15190,6 +15202,12 @@ snapshots: transitivePeerDependencies: - ts-node + eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.7.0(@typescript-eslint/parser@8.7.0(eslint@9.11.1(jiti@1.21.6))(typescript@5.6.2))(eslint@9.11.1(jiti@1.21.6))(typescript@5.6.2))(eslint@9.11.1(jiti@1.21.6)): + dependencies: + eslint: 9.11.1(jiti@1.21.6) + optionalDependencies: + '@typescript-eslint/eslint-plugin': 8.7.0(@typescript-eslint/parser@8.7.0(eslint@9.11.1(jiti@1.21.6))(typescript@5.6.2))(eslint@9.11.1(jiti@1.21.6))(typescript@5.6.2) + eslint-plugin-vue@9.28.0(eslint@9.11.1(jiti@1.21.6)): dependencies: '@eslint-community/eslint-utils': 4.4.0(eslint@9.11.1(jiti@1.21.6))
} @@ -73,8 +72,8 @@ const fuzzySort: SortingFn = (rowA, rowB, columnId) => { // Only sort by rank if the column has ranking information if (rowA.columnFiltersMeta[columnId]) { dir = compareItems( - rowA.columnFiltersMeta[columnId].itemRank!, - rowB.columnFiltersMeta[columnId].itemRank!, + rowA.columnFiltersMeta[columnId].itemRank, + rowB.columnFiltersMeta[columnId].itemRank, ) } @@ -94,35 +93,35 @@ function App() { () => [ { accessorKey: 'id', - filterFn: 'equalsString', //note: normal non-fuzzy filter column - exact match required + filterFn: 'equalsString', // note: normal non-fuzzy filter column - exact match required }, { accessorKey: 'firstName', cell: (info) => info.getValue(), - filterFn: 'includesStringSensitive', //note: normal non-fuzzy filter column + filterFn: 'includesStringSensitive', // note: normal non-fuzzy filter column }, { - accessorFn: (row) => row.lastName, //note: normal non-fuzzy filter column - case sensitive + accessorFn: (row) => row.lastName, // note: normal non-fuzzy filter column - case sensitive id: 'lastName', cell: (info) => info.getValue(), header: () => Last Name, - filterFn: 'includesString', //note: normal non-fuzzy filter column - case insensitive + filterFn: 'includesString', // note: normal non-fuzzy filter column - case insensitive }, { accessorFn: (row) => `${row.firstName} ${row.lastName}`, id: 'fullName', header: 'Full Name', cell: (info) => info.getValue(), - filterFn: 'fuzzy', //using our custom fuzzy filter function + filterFn: 'fuzzy', // using our custom fuzzy filter function // filterFn: fuzzyFilter, //or just define with the function - sortingFn: fuzzySort, //sort by fuzzy rank (falls back to alphanumeric) + sortingFn: fuzzySort, // sort by fuzzy rank (falls back to alphanumeric) }, ], [], ) const [data, setData] = React.useState>(() => makeData(5_000)) - const refreshData = () => setData((_old) => makeData(50_000)) //stress test + const refreshData = () => setData((_old) => makeData(50_000)) // stress test const table = useTable({ _features, @@ -134,7 +133,7 @@ function App() { columns, data, filterFns: { - fuzzy: fuzzyFilter, //define as a filter function that can be used in column definitions + fuzzy: fuzzyFilter, // define as a filter function that can be used in column definitions }, state: { columnFilters, @@ -142,13 +141,13 @@ function App() { }, onColumnFiltersChange: setColumnFilters, onGlobalFilterChange: setGlobalFilter, - globalFilterFn: 'fuzzy', //apply fuzzy filter to the global filter (most common use case for fuzzy filter) + globalFilterFn: 'fuzzy', // apply fuzzy filter to the global filter (most common use case for fuzzy filter) debugTable: true, debugHeaders: true, debugColumns: false, }) - //apply the fuzzy sort if the fullName column is being filtered + // apply the fuzzy sort if the fullName column is being filtered React.useEffect(() => { if (table.getState().columnFilters[0]?.id === 'fullName') { if (table.getState().sorting[0]?.id !== 'fullName') { diff --git a/examples/react/full-width-resizable-table/src/main.tsx b/examples/react/full-width-resizable-table/src/main.tsx index e26f55db03..db798a017c 100644 --- a/examples/react/full-width-resizable-table/src/main.tsx +++ b/examples/react/full-width-resizable-table/src/main.tsx @@ -2,7 +2,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import './index.css' -import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table' +import { flexRender, useTable } from '@tanstack/react-table' import { makeData } from './makeData' import type { ColumnDef } from '@tanstack/react-table' import type { Person } from './makeData' diff --git a/examples/react/full-width-table/src/main.tsx b/examples/react/full-width-table/src/main.tsx index d8dbfef0bc..6c18f4f8e6 100644 --- a/examples/react/full-width-table/src/main.tsx +++ b/examples/react/full-width-table/src/main.tsx @@ -3,7 +3,6 @@ import ReactDOM from 'react-dom/client' import './index.css' import { - createCoreRowModel, createPaginatedRowModel, flexRender, useTable, diff --git a/examples/react/fully-controlled/src/main.tsx b/examples/react/fully-controlled/src/main.tsx index efa8d27c8c..dc0be5ec30 100644 --- a/examples/react/fully-controlled/src/main.tsx +++ b/examples/react/fully-controlled/src/main.tsx @@ -4,7 +4,6 @@ import ReactDOM from 'react-dom/client' import './index.css' import { - createCoreRowModel, createPaginatedRowModel, flexRender, useTable, diff --git a/examples/react/grouping/src/main.tsx b/examples/react/grouping/src/main.tsx index 6574da6dc9..e3d7006230 100644 --- a/examples/react/grouping/src/main.tsx +++ b/examples/react/grouping/src/main.tsx @@ -4,13 +4,11 @@ import ReactDOM from 'react-dom/client' import './index.css' import { - ColumnDef, ColumnFiltering, ColumnGrouping, RowExpanding, RowPagination, RowSorting, - createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, @@ -20,7 +18,8 @@ import { flexRender, } from '@tanstack/react-table' import { makeData } from './makeData' -import type { GroupingState } from '@tanstack/react-table' +import type { ColumnDef , + GroupingState} from '@tanstack/react-table' import type { Person } from './makeData' const tableHelper = createTableHelper({ @@ -97,7 +96,7 @@ function App() { ) const [data, setData] = React.useState(() => makeData(10_000)) - const refreshData = () => setData(() => makeData(100_000)) //stress test + const refreshData = () => setData(() => makeData(100_000)) // stress test const [grouping, setGrouping] = React.useState([]) diff --git a/examples/react/kitchen-sink/src/App.tsx b/examples/react/kitchen-sink/src/App.tsx index 526302783b..0f818f6526 100644 --- a/examples/react/kitchen-sink/src/App.tsx +++ b/examples/react/kitchen-sink/src/App.tsx @@ -1,5 +1,4 @@ import { - createCoreRowModel, createFacetedMinMaxValues, createFacetedRowModel, createFacetedUniqueValues, diff --git a/examples/react/kitchen-sink/src/components/ActionButtons.tsx b/examples/react/kitchen-sink/src/components/ActionButtons.tsx index 11ca67337d..dfe177e630 100644 --- a/examples/react/kitchen-sink/src/components/ActionButtons.tsx +++ b/examples/react/kitchen-sink/src/components/ActionButtons.tsx @@ -12,7 +12,7 @@ type Props = { previousPage: () => void refreshData: () => void rerender: () => void - rowSelection: Object + rowSelection: object setPageIndex: (index: number) => void setPageSize: (size: number) => void totalRows: number diff --git a/examples/react/material-ui-pagination/src/main.tsx b/examples/react/material-ui-pagination/src/main.tsx index ecb5d5c56d..dccdb4c99d 100644 --- a/examples/react/material-ui-pagination/src/main.tsx +++ b/examples/react/material-ui-pagination/src/main.tsx @@ -14,7 +14,6 @@ import InputBase from '@mui/material/InputBase' import Paper from '@mui/material/Paper' import { - createCoreRowModel, createFilteredRowModel, createPaginatedRowModel, flexRender, diff --git a/examples/react/pagination-controlled/src/main.tsx b/examples/react/pagination-controlled/src/main.tsx index 97b88693e9..3818e82a96 100644 --- a/examples/react/pagination-controlled/src/main.tsx +++ b/examples/react/pagination-controlled/src/main.tsx @@ -10,7 +10,7 @@ import { import './index.css' -import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table' +import { flexRender, useTable } from '@tanstack/react-table' import { fetchData } from './fetchData' import type { ColumnDef, PaginationState } from '@tanstack/react-table' @@ -96,13 +96,13 @@ function App() { _rowModels: {}, columns, data: dataQuery.data?.rows ?? defaultData, - rowCount: dataQuery.data?.rowCount, //alternatively, just pass in `pageCount` directly + rowCount: dataQuery.data?.rowCount, // alternatively, just pass in `pageCount` directly // pageCount: dataQuery.data?.pageCount, //recommended to use `rowCount` instead like just above state: { pagination, }, onPaginationChange: setPagination, - manualPagination: true, //we're doing manual "server-side" pagination + manualPagination: true, // we're doing manual "server-side" pagination // getPaginatedRowModel: createPaginatedRowModel(), // If only doing manual pagination, you don't need this debugTable: true, }) diff --git a/examples/react/pagination/src/main.tsx b/examples/react/pagination/src/main.tsx index 4d75d34c3c..0572920929 100644 --- a/examples/react/pagination/src/main.tsx +++ b/examples/react/pagination/src/main.tsx @@ -4,7 +4,6 @@ import ReactDOM from 'react-dom/client' import './index.css' import { - createCoreRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, @@ -106,7 +105,7 @@ function MyTable({ data, debugTable: true, onPaginationChange: setPagination, - //no need to pass pageCount or rowCount with client-side pagination as it is calculated automatically + // no need to pass pageCount or rowCount with client-side pagination as it is calculated automatically state: { pagination, }, diff --git a/examples/react/query-router-search-params/src/components/table.tsx b/examples/react/query-router-search-params/src/components/table.tsx index 5a5c57bd74..a7e6ef88c0 100644 --- a/examples/react/query-router-search-params/src/components/table.tsx +++ b/examples/react/query-router-search-params/src/components/table.tsx @@ -1,4 +1,4 @@ -import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table' +import { flexRender, useTable } from '@tanstack/react-table' import { DebouncedInput } from './debouncedInput' import type { ColumnDef, diff --git a/examples/react/row-dnd/src/main.tsx b/examples/react/row-dnd/src/main.tsx index 309c797110..1ef72c75ae 100644 --- a/examples/react/row-dnd/src/main.tsx +++ b/examples/react/row-dnd/src/main.tsx @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client' import './index.css' -import { createCoreRowModel, flexRender, useTable } from '@tanstack/react-table' +import { flexRender, useTable } from '@tanstack/react-table' // needed for table body level scope DnD setup import { @@ -51,7 +51,7 @@ const DraggableRow = ({ row }: { row: Row }) => { }) const style: CSSProperties = { - transform: CSS.Transform.toString(transform), //let dnd-kit do its thing + transform: CSS.Transform.toString(transform), // let dnd-kit do its thing transition: transition, opacity: isDragging ? 0.8 : 1, zIndex: isDragging ? 1 : 0, @@ -123,7 +123,7 @@ function App() { _rowModels: {}, columns, data, - getRowId: (row) => row.userId, //required because row indexes will change + getRowId: (row) => row.userId, // required because row indexes will change debugTable: true, debugHeaders: true, debugColumns: true, @@ -136,7 +136,7 @@ function App() { setData((data) => { const oldIndex = dataIds.indexOf(active.id) const newIndex = dataIds.indexOf(over.id) - return arrayMove(data, oldIndex, newIndex) //this is just a splice util + return arrayMove(data, oldIndex, newIndex) // this is just a splice util }) } } diff --git a/examples/react/row-pinning/src/main.tsx b/examples/react/row-pinning/src/main.tsx index 4ef558f213..9b94ea220a 100644 --- a/examples/react/row-pinning/src/main.tsx +++ b/examples/react/row-pinning/src/main.tsx @@ -5,7 +5,6 @@ import { RowExpanding, RowPagination, RowPinning, - createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, diff --git a/examples/react/row-selection/src/main.tsx b/examples/react/row-selection/src/main.tsx index db205db75a..60a4f29d45 100644 --- a/examples/react/row-selection/src/main.tsx +++ b/examples/react/row-selection/src/main.tsx @@ -4,7 +4,6 @@ import { ColumnFiltering, RowPagination, RowSelection, - createCoreRowModel, createFilteredRowModel, createPaginatedRowModel, flexRender, diff --git a/examples/react/sorting/src/main.tsx b/examples/react/sorting/src/main.tsx index 2d1e03ac48..34e72b188a 100644 --- a/examples/react/sorting/src/main.tsx +++ b/examples/react/sorting/src/main.tsx @@ -5,7 +5,6 @@ import './index.css' import { RowSorting, - createCoreRowModel, createSortedRowModel, flexRender, useTable, @@ -14,7 +13,7 @@ import { makeData } from './makeData' import type { ColumnDef, SortingFn, SortingState } from '@tanstack/react-table' import type { Person } from './makeData' -//custom sorting logic for one of our enum columns +// custom sorting logic for one of our enum columns const sortStatusFn: SortingFn = (rowA, rowB, _columnId) => { const statusA = rowA.original.status const statusB = rowB.original.status @@ -32,30 +31,30 @@ function App() { { accessorKey: 'firstName', cell: (info) => info.getValue(), - //this column will sort in ascending order by default since it is a string column + // this column will sort in ascending order by default since it is a string column }, { accessorFn: (row) => row.lastName, id: 'lastName', cell: (info) => info.getValue(), header: () => Last Name, - sortUndefined: 'last', //force undefined values to the end - sortDescFirst: false, //first sort order will be ascending (nullable values can mess up auto detection of sort order) + sortUndefined: 'last', // force undefined values to the end + sortDescFirst: false, // first sort order will be ascending (nullable values can mess up auto detection of sort order) }, { accessorKey: 'age', header: () => 'Age', - //this column will sort in descending order by default since it is a number column + // this column will sort in descending order by default since it is a number column }, { accessorKey: 'visits', header: () => Visits, - sortUndefined: 'last', //force undefined values to the end + sortUndefined: 'last', // force undefined values to the end }, { accessorKey: 'status', header: 'Status', - sortingFn: sortStatusFn, //use our custom sorting function for this enum column + sortingFn: sortStatusFn, // use our custom sorting function for this enum column }, { accessorKey: 'progress', @@ -65,7 +64,7 @@ function App() { { accessorKey: 'rank', header: 'Rank', - invertSorting: true, //invert the sorting order (golf score-like where smaller is better) + invertSorting: true, // invert the sorting order (golf score-like where smaller is better) }, { accessorKey: 'createdAt', @@ -77,21 +76,21 @@ function App() { ) const [data, setData] = React.useState(() => makeData(1_000)) - const refreshData = () => setData(() => makeData(100_000)) //stress test with 100k rows + const refreshData = () => setData(() => makeData(100_000)) // stress test with 100k rows const table = useTable({ _features: { RowSorting }, _rowModels: { - Sorted: createSortedRowModel(), //client-side sorting + Sorted: createSortedRowModel(), // client-side sorting }, columns, data, debugTable: true, - onSortingChange: setSorting, //optionally control sorting state in your own scope for easy access + onSortingChange: setSorting, // optionally control sorting state in your own scope for easy access // sortingFns: { // sortStatusFn, //or provide our custom sorting function globally for all columns to be able to use // }, - //no need to pass pageCount or rowCount with client-side pagination as it is calculated automatically + // no need to pass pageCount or rowCount with client-side pagination as it is calculated automatically state: { sorting, }, @@ -103,7 +102,7 @@ function App() { // maxMultiSortColCount: 3, // only allow 3 columns to be sorted at once - default is Infinity }) - //access sorting state from the table instance + // access sorting state from the table instance console.log(table.getState().sorting) return ( diff --git a/examples/react/sub-components/src/main.tsx b/examples/react/sub-components/src/main.tsx index 3f33865bbf..3c6f147491 100644 --- a/examples/react/sub-components/src/main.tsx +++ b/examples/react/sub-components/src/main.tsx @@ -5,7 +5,6 @@ import './index.css' import { RowExpanding, - createCoreRowModel, createExpandedRowModel, flexRender, useTable, diff --git a/examples/react/virtualized-columns/src/main.tsx b/examples/react/virtualized-columns/src/main.tsx index 02a682fb06..1ad4f9336e 100644 --- a/examples/react/virtualized-columns/src/main.tsx +++ b/examples/react/virtualized-columns/src/main.tsx @@ -6,7 +6,6 @@ import './index.css' import { ColumnSizing, RowSorting, - createCoreRowModel, createSortedRowModel, flexRender, useTable, @@ -38,24 +37,24 @@ function App() { const visibleColumns = table.getVisibleLeafColumns() - //The virtualizers need to know the scrollable container element + // The virtualizers need to know the scrollable container element const tableContainerRef = React.useRef(null) - //we are using a slightly different virtualization strategy for columns (compared to virtual rows) in order to support dynamic row heights + // we are using a slightly different virtualization strategy for columns (compared to virtual rows) in order to support dynamic row heights const columnVirtualizer = useVirtualizer({ count: visibleColumns.length, - estimateSize: (index) => visibleColumns[index].getSize(), //estimate width of each column for accurate scrollbar dragging + estimateSize: (index) => visibleColumns[index].getSize(), // estimate width of each column for accurate scrollbar dragging getScrollElement: () => tableContainerRef.current, horizontal: true, - overscan: 3, //how many columns to render on each side off screen each way (adjust this for performance) + overscan: 3, // how many columns to render on each side off screen each way (adjust this for performance) }) - //dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement` + // dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement` const rowVirtualizer = useVirtualizer({ count: rows.length, - estimateSize: () => 33, //estimate row height for accurate scrollbar dragging + estimateSize: () => 33, // estimate row height for accurate scrollbar dragging getScrollElement: () => tableContainerRef.current, - //measure dynamic row height, except in firefox because it measures table border height incorrectly + // measure dynamic row height, except in firefox because it measures table border height incorrectly measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 @@ -67,7 +66,7 @@ function App() { const virtualColumns = columnVirtualizer.getVirtualItems() const virtualRows = rowVirtualizer.getVirtualItems() - //different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right + // different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right let virtualPaddingLeft: number | undefined let virtualPaddingRight: number | undefined @@ -78,7 +77,7 @@ function App() { (virtualColumns[virtualColumns.length - 1]?.end ?? 0) } - //All important CSS styles are included as inline styles for this example. This is not recommended for your code. + // All important CSS styles are included as inline styles for this example. This is not recommended for your code. return (
{process.env.NODE_ENV === 'development' ? ( @@ -95,9 +94,9 @@ function App() { className="container" ref={tableContainerRef} style={{ - overflow: 'auto', //our scrollable table container - position: 'relative', //needed for sticky header - height: '800px', //should be a fixed height + overflow: 'auto', // our scrollable table container + position: 'relative', // needed for sticky header + height: '800px', // should be a fixed height }} > {/* Even though we're still using sematic table tags, we must use CSS grid and flexbox for dynamic row heights */} @@ -116,7 +115,7 @@ function App() { style={{ display: 'flex', width: '100%' }} > {virtualPaddingLeft ? ( - //fake empty column to the left for virtualization scroll padding + // fake empty column to the left for virtualization scroll padding
) : null} {virtualColumns.map((vc) => { @@ -150,7 +149,7 @@ function App() { ) })} {virtualPaddingRight ? ( - //fake empty column to the right for virtualization scroll padding + // fake empty column to the right for virtualization scroll padding ) : null}
@@ -203,7 +202,7 @@ function App() { ) })} {virtualPaddingRight ? ( - //fake empty column to the right for virtualization scroll padding + // fake empty column to the right for virtualization scroll padding diff --git a/examples/react/virtualized-infinite-scrolling/src/main.tsx b/examples/react/virtualized-infinite-scrolling/src/main.tsx index 80e0c3995d..7fcc34cff4 100644 --- a/examples/react/virtualized-infinite-scrolling/src/main.tsx +++ b/examples/react/virtualized-infinite-scrolling/src/main.tsx @@ -3,11 +3,10 @@ import ReactDOM from 'react-dom/client' import './index.css' -//3 TanStack Libraries!!! +// 3 TanStack Libraries!!! import { ColumnSizing, RowSorting, - createCoreRowModel, createSortedRowModel, flexRender, useTable, @@ -27,7 +26,7 @@ import type { ColumnDef, OnChangeFn, SortingState } from '@tanstack/react-table' const fetchSize = 50 function App() { - //we need a reference to the scrolling element for logic down below + // we need a reference to the scrolling element for logic down below const tableContainerRef = React.useRef(null) const [sorting, setSorting] = React.useState([]) @@ -78,16 +77,16 @@ function App() { [], ) - //react-query has a useInfiniteQuery hook that is perfect for this use case + // react-query has a useInfiniteQuery hook that is perfect for this use case const { data, fetchNextPage, isFetching, isLoading } = useInfiniteQuery({ queryKey: [ 'people', - sorting, //refetch when sorting changes + sorting, // refetch when sorting changes ], queryFn: async ({ pageParam = 0 }) => { const start = (pageParam as number) * fetchSize - const fetchedData = await fetchData(start, fetchSize, sorting) //pretend api call + const fetchedData = await fetchData(start, fetchSize, sorting) // pretend api call return fetchedData }, initialPageParam: 0, @@ -96,7 +95,7 @@ function App() { placeholderData: keepPreviousData, }) - //flatten the array of arrays from the useInfiniteQuery hook + // flatten the array of arrays from the useInfiniteQuery hook const flatData = React.useMemo( () => data?.pages.flatMap((page) => page.data) ?? [], [data], @@ -104,12 +103,12 @@ function App() { const totalDBRowCount = data?.pages[0]?.meta?.totalRowCount ?? 0 const totalFetched = flatData.length - //called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table + // called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table const fetchMoreOnBottomReached = React.useCallback( (containerRefElement?: HTMLDivElement | null) => { if (containerRefElement) { const { scrollHeight, scrollTop, clientHeight } = containerRefElement - //once the user has scrolled within 500px of the bottom of the table, fetch more data if we can + // once the user has scrolled within 500px of the bottom of the table, fetch more data if we can if ( scrollHeight - scrollTop - clientHeight < 500 && !isFetching && @@ -122,7 +121,7 @@ function App() { [fetchNextPage, isFetching, totalFetched, totalDBRowCount], ) - //a check on mount and after a fetch to see if the table is already scrolled to the bottom and immediately needs to fetch more data + // a check on mount and after a fetch to see if the table is already scrolled to the bottom and immediately needs to fetch more data React.useEffect(() => { fetchMoreOnBottomReached(tableContainerRef.current) }, [fetchMoreOnBottomReached]) @@ -139,7 +138,7 @@ function App() { debugTable: true, }) - //scroll to top of table when sorting changes + // scroll to top of table when sorting changes const handleSortingChange: OnChangeFn = (updater) => { setSorting(updater) if (table.getRowModel().rows.length) { @@ -147,7 +146,7 @@ function App() { } } - //since this table option is derived from table row model state, we're using the table.setOptions utility + // since this table option is derived from table row model state, we're using the table.setOptions utility table.setOptions((prev) => ({ ...prev, onSortingChange: handleSortingChange, @@ -157,9 +156,9 @@ function App() { const rowVirtualizer = useVirtualizer({ count: rows.length, - estimateSize: () => 33, //estimate row height for accurate scrollbar dragging + estimateSize: () => 33, // estimate row height for accurate scrollbar dragging getScrollElement: () => tableContainerRef.current, - //measure dynamic row height, except in firefox because it measures table border height incorrectly + // measure dynamic row height, except in firefox because it measures table border height incorrectly measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 @@ -187,9 +186,9 @@ function App() { onScroll={(e) => fetchMoreOnBottomReached(e.target as HTMLDivElement)} ref={tableContainerRef} style={{ - overflow: 'auto', //our scrollable table container - position: 'relative', //needed for sticky header - height: '600px', //should be a fixed height + overflow: 'auto', // our scrollable table container + position: 'relative', // needed for sticky header + height: '600px', // should be a fixed height }} > {/* Even though we're still using sematic table tags, we must use CSS grid and flexbox for dynamic row heights */} @@ -242,21 +241,21 @@ function App() {