add unused imports rule

eslint.config.js

@@ -2,18 +2,23 @@
 
 // @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',
       '@typescript-eslint/naming-convention': 'off',
       '@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',
     },
   },
 ]

examples/angular/column-pinning-sticky/src/app/app.component.ts

@@ -1,5 +1,4 @@
 import {
-  ChangeDetectionStrategy,
   Component,
   computed,
   signal,

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

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<TFeatures, TFns, TData>,

examples/angular/row-selection-signal/src/app/selection-column.component.ts

@@ -23,8 +23,8 @@ export class TableHeadSelectionComponent<T> {
   // 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<Column<T, unknown>>()
-  //header = input.required<Header<T, unknown>>()
+  // column = input.required<Column<T, unknown>>()
+  // header = input.required<Header<T, unknown>>()
   table = input.required<Table<T>>()
 }
 

examples/lit/column-sizing/src/main.ts

@@ -41,7 +41,7 @@ const columns: Array<ColumnDef<any, Person>> = [
   {
     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',

examples/lit/filters/src/main.ts

@@ -68,7 +68,7 @@ const columns: Array<ColumnDef<any, Person>> = [
 ]
 
 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<TFeatures, TFns, TData>,
@@ -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,

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 {

examples/lit/sorting/src/main.ts

@@ -22,30 +22,30 @@ const columns: Array<ColumnDef<any, Person>> = [
   {
     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`<span>Last Name</span>`,
-    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`<span>Visits</span>`,
-    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<ColumnDef<any, Person>> = [
   {
     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',

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
           })}"
         >
           <table style="display: grid">
@@ -139,8 +139,8 @@ class LitTableExample extends LitElement {
             <tbody
               style=${styleMap({
                 display: 'grid',
-                height: `${virtualizer.getTotalSize()}px`, //tells scrollbar how big the table is
-                position: 'relative', //needed for absolute positioning of rows
+                height: `${virtualizer.getTotalSize()}px`, // tells scrollbar how big the table is
+                position: 'relative', // needed for absolute positioning of rows
               })}
             >
               ${repeat(

examples/qwik/row-selection/src/main.tsx

@@ -155,7 +155,7 @@ const App = component$(() => {
                   <th
                     key={id}
                     onClick$={$(() => {
-                      const thisCol = table.getColumn(id)! //avoid serialization error
+                      const thisCol = table.getColumn(id)! // avoid serialization error
                       thisCol.toggleSorting()
                     })}
                     colSpan={header.colSpan}

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={

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
       })
     }
   }

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<any, Person>): CSSProperties => {
   const isPinned = column.getIsPinned()
   const isLastLeftPinnedColumn =
@@ -174,7 +174,7 @@ function App() {
                     <th
                       key={header.id}
                       colSpan={header.colSpan}
-                      //IMPORTANT: This is where the magic happens!
+                      // IMPORTANT: This is where the magic happens!
                       style={{ ...getCommonPinningStyles(column) }}
                     >
                       <div className="whitespace-nowrap">
@@ -245,7 +245,7 @@ function App() {
                   return (
                     <td
                       key={cell.id}
-                      //IMPORTANT: This is where the magic happens!
+                      // IMPORTANT: This is where the magic happens!
                       style={{ ...getCommonPinningStyles(column) }}
                     >
                       {flexRender(

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 <table> element
+              ...columnSizeVars, // Define column sizes on the <table> 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<any, Person> }) {
   return (
     <div
@@ -218,7 +218,7 @@ function TableBody({ table }: { table: Table<any, Person> }) {
           }}
         >
           {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<any, Person> }) {
   )
 }
 
-//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,

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<TFeatures, TFns, TData>,
     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<TFeatures, TFns, TData>,
@@ -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: <TFeatures extends TableFeatures, TFns extends Fns<TFeatures, TFns, TData>, 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<Array<ColumnDef<any, Person>>>(
     () => [
@@ -184,7 +183,7 @@ function App() {
   const [density, setDensity] = React.useState<DensityState>('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() {
                     <td
                       key={cell.id}
                       style={{
-                        //using our new feature
+                        // using our new feature
                         padding:
                           density === 'sm'
                             ? '4px'

examples/react/expanding/src/main.tsx

@@ -5,7 +5,6 @@ import {
   RowExpanding,
   RowPagination,
   RowSorting,
-  createCoreRowModel,
   createFilteredRowModel,
   createPaginatedRowModel,
   createSortedRowModel,

examples/react/filters-faceted/src/main.tsx

@@ -8,7 +8,6 @@ import {
   ColumnFiltering,
   RowPagination,
   RowSorting,
-  createCoreRowModel,
   createFacetedMinMaxValues,
   createFacetedRowModel,
   createFacetedUniqueValues,