rename feature imports

docs/guide/custom-features.md

@@ -58,51 +58,51 @@ This might be a bit confusing, so let's break down what each of these methods do
 
 ##### getDefaultTableOptions
 
-The `getDefaultTableOptions` method in a table feature is responsible for setting the default table options for that feature. For example, in the [Column Sizing](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/ColumnSizing.ts) feature, the `getDefaultTableOptions` method sets the default `columnResizeMode` option with a default value of `"onEnd"`.
+The `getDefaultTableOptions` method in a table feature is responsible for setting the default table options for that feature. For example, in the [Column Sizing](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/columnSizingFeature.ts) feature, the `getDefaultTableOptions` method sets the default `columnResizeMode` option with a default value of `"onEnd"`.
 
 <br />
 
 ##### getDefaultColumnDef
 
-The `getDefaultColumnDef` method in a table feature is responsible for setting the default column options for that feature. For example, in the [Sorting](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSorting.ts) feature, the `getDefaultColumnDef` method sets the default `sortUndefined` column option with a default value of `1`.
+The `getDefaultColumnDef` method in a table feature is responsible for setting the default column options for that feature. For example, in the [Sorting](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/rowSortingFeature.ts) feature, the `getDefaultColumnDef` method sets the default `sortUndefined` column option with a default value of `1`.
 
 <br />
 
 ##### getInitialState
 
-The `getInitialState` method in a table feature is responsible for setting the default state for that feature. For example, in the [Pagination](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowPagination.ts) feature, the `getInitialState` method sets the default `pageSize` state with a value of `10` and the default `pageIndex` state with a value of `0`.
+The `getInitialState` method in a table feature is responsible for setting the default state for that feature. For example, in the [Pagination](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/rowPaginationFeature.ts) feature, the `getInitialState` method sets the default `pageSize` state with a value of `10` and the default `pageIndex` state with a value of `0`.
 
 #### API Creators
 
 <br />
 
 ##### constructTable
 
-The `constructTable` method in a table feature is responsible for adding methods to the `table` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSelection.ts) feature, the `constructTable` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `RowSelection` feature.
+The `constructTable` method in a table feature is responsible for adding methods to the `table` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/rowSelectionFeature.ts) feature, the `constructTable` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `rowSelectionFeature` feature.
 
 <br />
 
 ##### constructHeader
 
-The `constructHeader` method in a table feature is responsible for adding methods to the `header` instance. For example, in the [Column Sizing](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/ColumnSizing.ts) feature, the `constructHeader` method adds many header instance API methods such as `getStart`, and many others. So then, when you call `header.getStart()`, you are calling a method that was added to the header instance by the `ColumnSizing` feature.
+The `constructHeader` method in a table feature is responsible for adding methods to the `header` instance. For example, in the [Column Sizing](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/columnSizingFeature.ts) feature, the `constructHeader` method adds many header instance API methods such as `getStart`, and many others. So then, when you call `header.getStart()`, you are calling a method that was added to the header instance by the `columnSizingFeature` feature.
 
 <br />
 
 ##### constructColumn
 
-The `constructColumn` method in a table feature is responsible for adding methods to the `column` instance. For example, in the [Sorting](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSorting.ts) feature, the `constructColumn` method adds many column instance API methods such as `getNextSortingOrder`, `toggleSorting`, etc. So then, when you call `column.toggleSorting()`, you are calling a method that was added to the column instance by the `RowSorting` feature.
+The `constructColumn` method in a table feature is responsible for adding methods to the `column` instance. For example, in the [Sorting](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/rowSortingFeature.ts) feature, the `constructColumn` method adds many column instance API methods such as `getNextSortingOrder`, `toggleSorting`, etc. So then, when you call `column.toggleSorting()`, you are calling a method that was added to the column instance by the `rowSortingFeature` feature.
 
 <br />
 
 ##### constructRow
 
-The `constructRow` method in a table feature is responsible for adding methods to the `row` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSelection.ts) feature, the `constructRow` method adds many row instance API methods such as `toggleSelected`, `getIsSelected`, etc. So then, when you call `row.toggleSelected()`, you are calling a method that was added to the row instance by the `RowSelection` feature.
+The `constructRow` method in a table feature is responsible for adding methods to the `row` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/rowSelectionFeature.ts) feature, the `constructRow` method adds many row instance API methods such as `toggleSelected`, `getIsSelected`, etc. So then, when you call `row.toggleSelected()`, you are calling a method that was added to the row instance by the `rowSelectionFeature` feature.
 
 <br />
 
 ##### constructCell
 
-The `constructCell` method in a table feature is responsible for adding methods to the `cell` instance. For example, in the [Column Grouping](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/ColumnGrouping.ts) feature, the `constructCell` method adds many cell instance API methods such as `getIsGrouped`, `getIsAggregated`, etc. So then, when you call `cell.getIsGrouped()`, you are calling a method that was added to the cell instance by the `ColumnGrouping` feature.
+The `constructCell` method in a table feature is responsible for adding methods to the `cell` instance. For example, in the [Column Grouping](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/columnGroupingFeature.ts) feature, the `constructCell` method adds many cell instance API methods such as `getIsGrouped`, `getIsAggregated`, etc. So then, when you call `cell.getIsGrouped()`, you are calling a method that was added to the cell instance by the `columnGroupingFeature` feature.
 
 ### Adding a Custom Feature
 

examples/angular/column-ordering/src/app/app.component.ts

@@ -10,7 +10,8 @@ import {
   injectTable,
 } from '@tanstack/angular-table'
 import { faker } from '@faker-js/faker'
-import { type Person, makeData } from './makeData'
+import { makeData } from './makeData'
+import type { Person } from './makeData'
 import type {
   ColumnDef,
   ColumnOrderState,

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

@@ -1,17 +1,19 @@
 import { Component, computed, signal } from '@angular/core'
 import {
-  type Column,
-  type ColumnDef,
-  type ColumnOrderState,
-  type ColumnPinningState,
-  type ColumnVisibilityState,
   FlexRenderDirective,
   createCoreRowModel,
   injectTable,
 } from '@tanstack/angular-table'
 import { faker } from '@faker-js/faker'
 import { NgStyle, NgTemplateOutlet, SlicePipe } from '@angular/common'
 import { makeData } from './makeData'
+import type {
+  Column,
+  ColumnDef,
+  ColumnOrderState,
+  ColumnPinningState,
+  ColumnVisibilityState,
+} from '@tanstack/angular-table'
 
 type Person = {
   firstName: string

examples/angular/column-visibility/src/app/app.component.ts

@@ -1,7 +1,6 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  type OnInit,
   computed,
   signal,
 } from '@angular/core'
@@ -10,6 +9,7 @@ import {
   createCoreRowModel,
   injectTable,
 } from '@tanstack/angular-table'
+import type { OnInit } from '@angular/core'
 import type { ColumnDef, ColumnVisibilityState } from '@tanstack/angular-table'
 
 type Person = {

examples/angular/filters/src/app/debounced-input.directive.ts

@@ -1,12 +1,7 @@
 import { Directive, ElementRef, inject, input } from '@angular/core'
-import {
-  type MonoTypeOperatorFunction,
-  Observable,
-  debounceTime,
-  fromEvent,
-  switchMap,
-} from 'rxjs'
+import { Observable, debounceTime, fromEvent, switchMap } from 'rxjs'
 import { outputFromObservable, toObservable } from '@angular/core/rxjs-interop'
+import type { MonoTypeOperatorFunction } from 'rxjs'
 import type { NgZone } from '@angular/core'
 
 export function runOutsideAngular<T>(

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

@@ -13,11 +13,12 @@ import {
   injectTable,
 } from '@tanstack/angular-table'
 import { FilterComponent } from './filter'
-import { type Person, makeData } from './makeData'
+import { makeData } from './makeData'
 import {
   TableHeadSelectionComponent,
   TableRowSelectionComponent,
 } from './selection-column.component'
+import type { Person } from './makeData'
 import type { ColumnDef, RowSelectionState } from '@tanstack/angular-table'
 import type { TemplateRef } from '@angular/core'
 

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

@@ -15,11 +15,12 @@ import {
 } from '@tanstack/angular-table'
 import { FormsModule } from '@angular/forms'
 import { FilterComponent } from './filter'
-import { type Person, makeData } from './makeData'
+import { makeData } from './makeData'
 import {
   TableHeadSelectionComponent,
   TableRowSelectionComponent,
 } from './selection-column.component'
+import type { Person } from './makeData'
 import type { ColumnDef, RowSelectionState } from '@tanstack/angular-table'
 import type { TemplateRef } from '@angular/core'
 

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

@@ -1,9 +1,6 @@
-import {
-  type CellContext,
-  type HeaderContext,
-  injectFlexRenderContext,
-} from '@tanstack/angular-table'
+import { injectFlexRenderContext } from '@tanstack/angular-table'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
+import type { CellContext, HeaderContext } from '@tanstack/angular-table'
 
 @Component({
   template: `

examples/angular/signal-input/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core'
-import { type PaginationState } from '@tanstack/angular-table'
 import { makeData } from './makeData'
 import { PersonTableComponent } from './person-table/person-table.component'
+import type { PaginationState } from '@tanstack/angular-table'
 
 @Component({
   selector: 'app-root',

examples/lit/basic/src/main.ts

@@ -3,9 +3,9 @@ import { LitElement, html } from 'lit'
 import { repeat } from 'lit/directives/repeat.js'
 import {
   ColumnDef,
-  RowSorting,
   TableController,
   flexRender,
+  rowSortingFeature,
   tableFeatures,
 } from '@tanstack/lit-table'
 import install from '@twind/with-web-components'
@@ -25,7 +25,7 @@ type Person = {
 
 // 3. New in V9! Tell the table which features and row models we want to use. In this case, this will be a basic table with no additional features
 const _features = tableFeatures({
-  RowSorting: RowSorting,
+  rowSortingFeature: rowSortingFeature,
 })
 
 // const columnHelper = createColumnHelper<typeof _features, Person>()

examples/react/column-dnd/src/main.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import {
-  ColumnOrdering,
-  ColumnSizing,
+  columnOrderingFeature,
+  columnSizingFeature,
   createTableHelper,
   flexRender,
 } from '@tanstack/react-table'
@@ -31,7 +31,7 @@ import type { Cell, ColumnDef, Header } from '@tanstack/react-table'
 import './index.css'
 
 const tableHelper = createTableHelper({
-  _features: { ColumnOrdering, ColumnSizing },
+  _features: { columnOrderingFeature, columnSizingFeature },
   _rowModels: {},
   TData: {} as Person,
   debugTable: true,

examples/react/column-ordering/src/main.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { faker } from '@faker-js/faker'
 import {
-  ColumnOrdering,
-  ColumnVisibility,
+  columnOrderingFeature,
+  columnVisibilityFeature,
   flexRender,
   tableFeatures,
   useTable,
@@ -17,7 +17,10 @@ import type {
 import type { Person } from './makeData'
 import './index.css'
 
-const _features = tableFeatures({ ColumnOrdering, ColumnVisibility })
+const _features = tableFeatures({
+  columnOrderingFeature,
+  columnVisibilityFeature,
+})
 
 const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   {

examples/react/column-pinning-sticky/src/main.tsx

@@ -1,24 +1,24 @@
-import React, { type CSSProperties } from 'react'
+import React from 'react'
 import ReactDOM from 'react-dom/client'
 import {
-  type Column,
-  type ColumnDef,
-  ColumnOrdering,
-  ColumnPinning,
-  ColumnVisibility,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnVisibilityFeature,
   flexRender,
   tableFeatures,
   useTable,
 } from '@tanstack/react-table'
 import { faker } from '@faker-js/faker'
 import { makeData } from './makeData'
+import type { Column, ColumnDef } from '@tanstack/react-table'
+import type { CSSProperties } from 'react'
 import type { Person } from './makeData'
 import './index.css'
 
 const _features = tableFeatures({
-  ColumnVisibility,
-  ColumnPinning,
-  ColumnOrdering,
+  columnVisibilityFeature,
+  columnPinningFeature,
+  columnOrderingFeature,
 })
 
 // These are the important styles to make sticky column pinning work!

examples/react/column-pinning/src/main.tsx

@@ -3,9 +3,9 @@ import ReactDOM from 'react-dom/client'
 import { faker } from '@faker-js/faker'
 import './index.css'
 import {
-  ColumnOrdering,
-  ColumnPinning,
-  ColumnVisibility,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnVisibilityFeature,
   flexRender,
   useTable,
 } from '@tanstack/react-table'
@@ -18,7 +18,11 @@ import type {
 } from '@tanstack/react-table'
 import type { Person } from './makeData'
 
-const _features = { ColumnVisibility, ColumnPinning, ColumnOrdering }
+const _features = {
+  columnVisibilityFeature,
+  columnPinningFeature,
+  columnOrderingFeature,
+}
 
 const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   {

examples/react/column-resizing-performant/src/main.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import {
-  ColumnResizing,
-  ColumnSizing,
+  columnResizingFeature,
+  columnSizingFeature,
   flexRender,
   tableFeatures,
   useTable,
@@ -11,7 +11,7 @@ import { makeData } from './makeData'
 import type { ColumnDef, Table } from '@tanstack/react-table'
 import './index.css'
 
-const _features = tableFeatures({ ColumnSizing, ColumnResizing })
+const _features = tableFeatures({ columnSizingFeature, columnResizingFeature })
 
 type Person = {
   firstName: string

examples/react/column-resizing/src/main.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import {
-  ColumnResizing,
-  ColumnSizing,
+  columnResizingFeature,
+  columnSizingFeature,
   flexRender,
   tableFeatures,
   useTable,
@@ -14,7 +14,7 @@ import type {
 } from '@tanstack/react-table'
 import './index.css'
 
-const _features = tableFeatures({ ColumnResizing, ColumnSizing })
+const _features = tableFeatures({ columnResizingFeature, columnSizingFeature })
 
 type Person = {
   firstName: string

examples/react/column-sizing/src/main.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import {
-  ColumnSizing,
+  columnSizingFeature,
   flexRender,
   tableFeatures,
   useTable,
 } from '@tanstack/react-table'
 import type { ColumnDef } from '@tanstack/react-table'
 import './index.css'
 
-const _features = tableFeatures({ ColumnSizing })
+const _features = tableFeatures({ columnSizingFeature })
 
 type Person = {
   firstName: string

examples/react/column-visibility/src/main.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import {
-  ColumnVisibility,
+  columnVisibilityFeature,
   flexRender,
   tableFeatures,
   useTable,
 } from '@tanstack/react-table'
 import type { ColumnDef } from '@tanstack/react-table'
 import './index.css'
 
-const _features = tableFeatures({ ColumnVisibility })
+const _features = tableFeatures({ columnVisibilityFeature })
 
 type Person = {
   firstName: string

examples/react/editable-data/src/main.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import {
-  ColumnFiltering,
-  RowPagination,
+  columnFilteringFeature,
   createFilteredRowModel,
   createPaginatedRowModel,
   flexRender,
+  rowPaginationFeature,
   tableFeatures,
   tableOptions,
   useTable,
@@ -21,7 +21,10 @@ import type {
 import type { Person } from './makeData'
 import './index.css'
 
-const _features = tableFeatures({ RowPagination, ColumnFiltering })
+const _features = tableFeatures({
+  rowPaginationFeature,
+  columnFilteringFeature,
+})
 
 const options = tableOptions<typeof _features, Person>({
   _features,