From fc22d576b4dc7bd1af6379ea60232fdb7dc06738 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Thu, 9 Jul 2026 13:46:53 -0500 Subject: [PATCH 1/3] feat: update column pinning terminology from left/right to start/end --- .../framework/alpine/guide/column-ordering.md | 6 +- docs/framework/alpine/guide/column-pinning.md | 70 ++-- docs/framework/alpine/guide/column-sizing.md | 16 +- docs/framework/alpine/guide/grouping.md | 2 +- .../alpine/reference/functions/createTable.md | 25 +- .../reference/functions/createTableHook.md | 8 +- .../reference/type-aliases/AlpineTable.md | 2 +- .../reference/type-aliases/AppAlpineTable.md | 2 +- .../reference/type-aliases/AppColumnHelper.md | 2 +- .../type-aliases/CreateTableHookOptions.md | 2 +- .../angular/guide/column-ordering.md | 6 +- .../framework/angular/guide/column-pinning.md | 64 ++-- docs/framework/angular/guide/column-sizing.md | 16 +- docs/framework/angular/guide/grouping.md | 2 +- docs/framework/angular/guide/migrating.md | 32 ++ .../reference/classes/FlexRenderCell.md | 2 +- .../reference/functions/createTableHook.md | 2 +- .../reference/type-aliases/AppAngularTable.md | 2 +- .../reference/type-aliases/AppCellContext.md | 14 +- .../type-aliases/AppColumnDefBase.md | 2 +- .../type-aliases/AppColumnDefTemplate.md | 2 +- .../reference/type-aliases/AppColumnHelper.md | 10 +- .../type-aliases/AppDisplayColumnDef.md | 2 +- .../type-aliases/AppGroupColumnDef.md | 2 +- .../type-aliases/AppHeaderContext.md | 8 +- .../type-aliases/CreateTableContextOptions.md | 2 +- .../type-aliases/CreateTableHookResult.md | 16 +- .../type-aliases/RenderableComponent.md | 2 +- docs/framework/lit/guide/column-ordering.md | 6 +- docs/framework/lit/guide/column-pinning.md | 64 ++-- docs/framework/lit/guide/column-sizing.md | 16 +- docs/framework/lit/guide/grouping.md | 2 +- docs/framework/lit/guide/migrating.md | 32 ++ .../lit/reference/classes/TableController.md | 12 +- .../lit/reference/type-aliases/LitTable.md | 2 +- .../framework/preact/guide/column-ordering.md | 6 +- docs/framework/preact/guide/column-pinning.md | 64 ++-- docs/framework/preact/guide/column-sizing.md | 16 +- docs/framework/preact/guide/grouping.md | 2 +- docs/framework/preact/guide/migrating.md | 32 ++ docs/framework/react/guide/column-ordering.md | 6 +- docs/framework/react/guide/column-pinning.md | 64 ++-- docs/framework/react/guide/column-sizing.md | 16 +- docs/framework/react/guide/grouping.md | 2 +- docs/framework/react/guide/migrating.md | 32 ++ docs/framework/solid/guide/column-ordering.md | 6 +- docs/framework/solid/guide/column-pinning.md | 64 ++-- docs/framework/solid/guide/column-sizing.md | 16 +- docs/framework/solid/guide/grouping.md | 2 +- docs/framework/solid/guide/migrating.md | 32 ++ .../reference/functions/createTableHook.md | 2 +- .../reference/interfaces/AppCellComponent.md | 4 +- .../reference/interfaces/AppCellProps.md | 6 +- .../interfaces/AppHeaderComponent.md | 4 +- .../reference/interfaces/AppHeaderProps.md | 6 +- .../reference/interfaces/AppTableComponent.md | 10 +- .../reference/interfaces/AppTableProps.md | 4 +- .../interfaces/CreateTableHookResult.md | 22 +- .../reference/type-aliases/AppCellContext.md | 14 +- .../type-aliases/AppColumnDefBase.md | 2 +- .../type-aliases/AppColumnDefTemplate.md | 2 +- .../reference/type-aliases/AppColumnHelper.md | 10 +- .../type-aliases/AppDisplayColumnDef.md | 2 +- .../type-aliases/AppGroupColumnDef.md | 2 +- .../type-aliases/AppHeaderContext.md | 8 +- .../reference/type-aliases/AppSolidTable.md | 10 +- .../reference/type-aliases/ComponentType.md | 2 +- .../type-aliases/CreateTableHookOptions.md | 2 +- .../framework/svelte/guide/column-ordering.md | 6 +- docs/framework/svelte/guide/column-pinning.md | 64 ++-- docs/framework/svelte/guide/column-sizing.md | 16 +- docs/framework/svelte/guide/grouping.md | 2 +- docs/framework/svelte/guide/migrating.md | 32 ++ docs/framework/vue/guide/column-ordering.md | 6 +- docs/framework/vue/guide/column-pinning.md | 64 ++-- docs/framework/vue/guide/column-sizing.md | 16 +- docs/framework/vue/guide/grouping.md | 2 +- docs/framework/vue/guide/migrating.md | 32 ++ .../reference/functions/createTableHook.md | 2 +- .../vue/reference/interfaces/AppCellProps.md | 4 +- .../reference/interfaces/AppHeaderProps.md | 4 +- .../vue/reference/interfaces/AppTableProps.md | 2 +- .../interfaces/CreateTableHookResult.md | 22 +- .../reference/type-aliases/AppCellContext.md | 14 +- .../type-aliases/AppColumnDefBase.md | 2 +- .../type-aliases/AppColumnDefTemplate.md | 2 +- .../reference/type-aliases/AppColumnHelper.md | 10 +- .../type-aliases/AppDisplayColumnDef.md | 2 +- .../type-aliases/AppGroupColumnDef.md | 2 +- .../type-aliases/AppHeaderContext.md | 8 +- .../vue/reference/type-aliases/AppVueTable.md | 18 +- .../reference/type-aliases/ComponentType.md | 2 +- .../type-aliases/CreateTableHookOptions.md | 2 +- .../vue/reference/variables/AppFlexRender.md | 2 +- docs/guide/columns.md | 2 +- docs/guide/header-groups.md | 2 +- docs/guide/headers.md | 2 +- .../index/functions/aggregationFn_max.md | 2 +- .../index/functions/aggregationFn_min.md | 2 +- .../index/functions/assignPrototypeAPIs.md | 2 +- .../index/functions/assignTableAPIs.md | 2 +- .../index/functions/buildHeaderGroups.md | 2 +- .../index/functions/callMemoOrStaticFn.md | 2 +- .../copyInstancePropertiesWithoutMemos.md | 40 +++ docs/reference/index/functions/flattenBy.md | 2 +- .../index/functions/getFunctionNameInfo.md | 2 +- docs/reference/index/functions/hasOwn.md | 2 +- docs/reference/index/functions/isFunction.md | 2 +- .../index/functions/makeObjectMap.md | 2 +- .../index/functions/makeStateUpdater.md | 11 +- docs/reference/index/functions/memo.md | 2 +- docs/reference/index/functions/tableMemo.md | 2 +- .../reference/index/functions/tableOptions.md | 10 +- docs/reference/index/index.md | 4 + docs/reference/index/interfaces/API.md | 16 +- .../index/interfaces/CachedRowModel_All.md | 96 +++-- .../index/interfaces/CachedRowModel_Core.md | 4 +- .../interfaces/CachedRowModel_Expanded.md | 4 +- .../interfaces/CachedRowModel_Faceted.md | 60 ++-- .../interfaces/CachedRowModel_Paginated.md | 4 +- .../interfaces/CachedRowModels_FeatureMap.md | 14 +- .../interfaces/ColumnDef_ColumnSizing.md | 8 +- .../index/interfaces/ColumnDef_FeatureMap.md | 18 +- .../index/interfaces/ColumnIndexes.md | 56 +++ docs/reference/index/interfaces/ColumnMeta.md | 2 +- .../index/interfaces/ColumnOffsets.md | 34 ++ .../interfaces/ColumnOffsetsByPosition.md | 56 +++ .../interfaces/ColumnOrderDefaultOptions.md | 4 +- .../index/interfaces/ColumnPinningState.md | 12 +- .../index/interfaces/Column_ColumnFaceting.md | 8 +- .../index/interfaces/Column_ColumnOrdering.md | 10 +- .../index/interfaces/Column_ColumnPinning.md | 4 +- .../index/interfaces/Column_ColumnSizing.md | 10 +- .../index/interfaces/Header_ColumnSizing.md | 6 +- .../index/interfaces/IdIdentifier.md | 6 +- .../interfaces/PaginationDefaultOptions.md | 4 +- .../index/interfaces/PaginationState.md | 6 +- docs/reference/index/interfaces/Plugins.md | 10 + .../index/interfaces/PrototypeAPI.md | 16 +- docs/reference/index/interfaces/RowModel.md | 8 +- .../index/interfaces/Row_ColumnFiltering.md | 6 +- .../index/interfaces/Row_ColumnPinning.md | 18 +- docs/reference/index/interfaces/Row_Core.md | 50 ++- .../index/interfaces/Row_CoreProperties.md | 32 +- docs/reference/index/interfaces/Row_Row.md | 52 ++- .../index/interfaces/Row_RowExpanding.md | 12 +- .../interfaces/StringHeaderIdentifier.md | 6 +- .../index/interfaces/TableFeatures.md | 14 + docs/reference/index/interfaces/TableMeta.md | 2 +- .../TableOptions_ColumnFiltering.md | 10 +- .../interfaces/TableOptions_ColumnOrdering.md | 4 +- .../interfaces/TableOptions_ColumnPinning.md | 2 +- .../interfaces/TableOptions_ColumnSizing.md | 4 +- .../index/interfaces/TableOptions_Core.md | 22 +- .../interfaces/TableOptions_RowExpanding.md | 16 +- .../interfaces/TableOptions_RowPagination.md | 12 +- .../index/interfaces/TableOptions_Rows.md | 6 +- .../index/interfaces/TableOptions_Table.md | 20 +- .../index/interfaces/TableState_All.md | 6 +- .../interfaces/TableState_ColumnOrdering.md | 4 +- .../index/interfaces/TableState_FeatureMap.md | 10 + .../interfaces/TableState_RowExpanding.md | 4 +- .../interfaces/TableState_RowPagination.md | 4 +- .../index/interfaces/Table_ColumnFaceting.md | 8 +- .../index/interfaces/Table_ColumnGrouping.md | 10 +- .../index/interfaces/Table_ColumnOrdering.md | 35 +- .../index/interfaces/Table_ColumnPinning.md | 134 +++---- .../index/interfaces/Table_ColumnSizing.md | 45 ++- docs/reference/index/interfaces/Table_Core.md | 54 +-- .../index/interfaces/Table_CoreProperties.md | 30 +- .../index/interfaces/Table_Internal.md | 78 ++-- .../index/interfaces/Table_RowExpanding.md | 30 +- .../index/interfaces/Table_RowModels_Core.md | 6 +- .../interfaces/Table_RowModels_Expanded.md | 6 +- .../interfaces/Table_RowModels_Faceted.md | 8 +- .../interfaces/Table_RowModels_Paginated.md | 6 +- .../index/interfaces/Table_RowPagination.md | 44 +-- .../index/interfaces/Table_RowSorting.md | 10 +- docs/reference/index/interfaces/Table_Rows.md | 6 +- .../reference/index/interfaces/Table_Table.md | 34 +- .../reference/index/type-aliases/APIObject.md | 2 +- .../index/type-aliases/AccessorColumnDef.md | 2 +- .../index/type-aliases/AccessorFn.md | 2 +- .../index/type-aliases/AccessorFnColumnDef.md | 2 +- .../type-aliases/AccessorFnColumnDefBase.md | 2 +- .../type-aliases/AccessorKeyColumnDef.md | 2 +- .../type-aliases/AccessorKeyColumnDefBase.md | 2 +- docs/reference/index/type-aliases/Atoms.md | 2 +- .../reference/index/type-aliases/Atoms_All.md | 2 +- .../reference/index/type-aliases/BaseAtoms.md | 2 +- .../index/type-aliases/BaseAtoms_All.md | 4 +- .../index/type-aliases/BuiltInFilterFn.md | 2 +- .../index/type-aliases/BuiltInSortFn.md | 2 +- .../index/type-aliases/CachedRowModels.md | 16 +- .../reference/index/type-aliases/ColumnDef.md | 2 +- .../index/type-aliases/ColumnDefBase.md | 2 +- .../index/type-aliases/ColumnDefBase_All.md | 2 +- .../index/type-aliases/ColumnDefResolved.md | 2 +- .../index/type-aliases/ColumnDefTemplate.md | 2 +- .../type-aliases/ColumnPinningPosition.md | 2 +- .../ColumnSizingDefaultOptions.md | 2 +- .../index/type-aliases/DisplayColumnDef.md | 2 +- .../index/type-aliases/ExpandedState.md | 2 +- .../index/type-aliases/ExpandedStateList.md | 2 +- .../index/type-aliases/ExternalAtoms.md | 2 +- .../index/type-aliases/ExternalAtoms_All.md | 4 +- .../index/type-aliases/ExtractColumnMeta.md | 2 +- .../index/type-aliases/ExtractTableMeta.md | 2 +- .../index/type-aliases/GroupColumnDef.md | 2 +- .../index/type-aliases/IdentifiedColumnDef.md | 2 +- .../index/type-aliases/PrototypeAPIObject.md | 2 +- .../type-aliases/StringOrTemplateHeader.md | 2 +- .../index/type-aliases/Table_RowModels.md | 2 +- .../index/variables/columnOrderingFeature.md | 2 +- .../index/variables/columnPinningFeature.md | 2 +- .../index/variables/columnSizingFeature.md | 2 +- .../index/variables/filterFn_arrHas.md | 2 +- .../index/variables/filterFn_arrIncludes.md | 2 +- .../variables/filterFn_arrIncludesAll.md | 2 +- .../variables/filterFn_arrIncludesSome.md | 2 +- .../index/variables/filterFn_equalsString.md | 18 +- .../filterFn_equalsStringSensitive.md | 18 +- .../index/variables/filterFn_greaterThan.md | 6 +- .../filterFn_greaterThanOrEqualTo.md | 6 +- .../index/variables/filterFn_inNumberRange.md | 2 +- .../variables/filterFn_includesString.md | 18 +- .../filterFn_includesStringSensitive.md | 16 + .../index/variables/filterFn_lessThan.md | 6 +- .../variables/filterFn_lessThanOrEqualTo.md | 6 +- docs/reference/index/variables/filterFns.md | 50 ++- docs/reference/index/variables/sortFns.md | 2 +- .../functions/cell_getIsAggregated.md | 2 +- .../functions/cell_getIsGrouped.md | 2 +- .../functions/cell_getIsPlaceholder.md | 2 +- .../functions/column_clearSorting.md | 2 +- .../functions/column_getAfter.md | 8 +- .../functions/column_getAggregationFn.md | 2 +- .../functions/column_getCanHide.md | 2 +- .../functions/column_getCanMultiSort.md | 2 +- .../functions/column_getCanSort.md | 2 +- .../column_getFacetedMinMaxValues.md | 2 +- .../functions/column_getFacetedRowModel.md | 2 +- .../column_getFacetedUniqueValues.md | 2 +- .../functions/column_getFirstSortDir.md | 2 +- .../functions/column_getIndex.md | 4 +- .../functions/column_getIsFirstColumn.md | 4 +- .../functions/column_getIsLastColumn.md | 4 +- .../functions/column_getIsPinned.md | 2 +- .../functions/column_getIsSorted.md | 2 +- .../functions/column_getNextSortingOrder.md | 2 +- .../functions/column_getPinnedIndex.md | 4 +- .../functions/column_getSize.md | 2 +- .../functions/column_getSortIndex.md | 2 +- .../functions/column_getStart.md | 10 +- .../column_getToggleSortingHandler.md | 2 +- .../column_getToggleVisibilityHandler.md | 2 +- .../static-functions/functions/column_pin.md | 4 +- .../functions/column_resetSize.md | 2 +- .../functions/column_toggleVisibility.md | 2 +- .../functions/getDefaultColumnOrderState.md | 2 +- .../getDefaultColumnSizingColumnDef.md | 2 +- .../functions/getDefaultColumnSizingState.md | 2 +- .../functions/getDefaultRowSelectionState.md | 2 +- .../functions/header_getContext.md | 2 +- .../functions/header_getLeafHeaders.md | 2 +- .../functions/header_getSize.md | 2 +- .../functions/header_getStart.md | 2 +- .../functions/isRowSelected.md | 2 +- .../functions/isSubRowSelected.md | 2 +- .../functions/isTouchStartEvent.md | 2 +- .../functions/orderColumns.md | 2 +- .../functions/passiveEventSupported.md | 2 +- .../functions/row_getAllCellsByColumnId.md | 2 +- .../functions/row_getCanMultiSelect.md | 2 +- .../functions/row_getCanSelect.md | 2 +- .../functions/row_getCanSelectSubRows.md | 2 +- .../functions/row_getCenterVisibleCells.md | 4 +- ...ibleCells.md => row_getEndVisibleCells.md} | 18 +- .../functions/row_getGroupingValue.md | 2 +- .../functions/row_getIsAllSubRowsSelected.md | 2 +- .../functions/row_getIsGrouped.md | 2 +- .../functions/row_getIsSelected.md | 2 +- .../functions/row_getIsSomeSelected.md | 2 +- ...leCells.md => row_getStartVisibleCells.md} | 18 +- .../functions/row_getToggleSelectedHandler.md | 2 +- .../functions/row_getVisibleCells.md | 6 +- .../row_getVisibleCellsByColumnId.md | 2 +- .../functions/row_toggleSelected.md | 2 +- .../functions/selectRowsFn.md | 2 +- .../functions/table_getCenterFlatHeaders.md | 2 +- .../functions/table_getCenterFooterGroups.md | 2 +- .../functions/table_getCenterHeaderGroups.md | 4 +- .../functions/table_getCenterLeafColumns.md | 4 +- .../functions/table_getCenterLeafHeaders.md | 2 +- .../functions/table_getCenterTotalSize.md | 2 +- .../table_getCenterVisibleLeafColumns.md | 2 +- .../functions/table_getColumnIndexes.md | 43 +++ .../functions/table_getColumnOffsets.md | 45 +++ ...tHeaders.md => table_getEndFlatHeaders.md} | 14 +- ...rGroups.md => table_getEndFooterGroups.md} | 16 +- ...rGroups.md => table_getEndHeaderGroups.md} | 16 +- ...fColumns.md => table_getEndLeafColumns.md} | 16 +- ...fHeaders.md => table_getEndLeafHeaders.md} | 16 +- ...tTotalSize.md => table_getEndTotalSize.md} | 16 +- ...s.md => table_getEndVisibleLeafColumns.md} | 16 +- .../table_getFilteredSelectedRowModel.md | 2 +- .../functions/table_getFlatHeaders.md | 2 +- .../functions/table_getFooterGroups.md | 2 +- .../table_getGlobalFacetedMinMaxValues.md | 2 +- .../table_getGlobalFacetedRowModel.md | 2 +- .../table_getGlobalFacetedUniqueValues.md | 2 +- .../table_getGroupedSelectedRowModel.md | 2 +- .../functions/table_getHeaderGroups.md | 2 +- .../functions/table_getIsAllColumnsVisible.md | 2 +- .../table_getIsAllPageRowsSelected.md | 2 +- .../functions/table_getIsAllRowsSelected.md | 2 +- .../functions/table_getIsSomeColumnsPinned.md | 4 +- .../table_getIsSomeColumnsVisible.md | 2 +- .../table_getIsSomePageRowsSelected.md | 2 +- .../functions/table_getIsSomeRowsSelected.md | 2 +- .../functions/table_getLeafHeaders.md | 2 +- .../functions/table_getOrderColumnsFn.md | 2 +- .../functions/table_getPinnedLeafColumns.md | 4 +- .../table_getPinnedVisibleLeafColumns.md | 8 +- .../functions/table_getPreSelectedRowModel.md | 2 +- .../functions/table_getRow.md | 2 +- .../functions/table_getRowId.md | 2 +- .../functions/table_getSelectedRowIds.md | 2 +- .../functions/table_getSelectedRowModel.md | 2 +- ...eaders.md => table_getStartFlatHeaders.md} | 14 +- ...roups.md => table_getStartFooterGroups.md} | 16 +- ...roups.md => table_getStartHeaderGroups.md} | 16 +- ...olumns.md => table_getStartLeafColumns.md} | 16 +- ...eaders.md => table_getStartLeafHeaders.md} | 16 +- ...otalSize.md => table_getStartTotalSize.md} | 16 +- ...md => table_getStartVisibleLeafColumns.md} | 16 +- ...le_getToggleAllColumnsVisibilityHandler.md | 2 +- ...ble_getToggleAllPageRowsSelectedHandler.md | 2 +- .../table_getToggleAllRowsSelectedHandler.md | 2 +- .../functions/table_getTotalSize.md | 4 +- .../functions/table_getVisibleFlatColumns.md | 2 +- .../functions/table_getVisibleLeafColumns.md | 2 +- .../functions/table_resetColumnOrder.md | 2 +- .../functions/table_resetColumnPinning.md | 4 +- .../functions/table_resetColumnSizing.md | 2 +- .../functions/table_resetColumnVisibility.md | 2 +- .../functions/table_resetGrouping.md | 2 +- .../functions/table_resetHeaderSizeInfo.md | 2 +- .../functions/table_resetRowSelection.md | 2 +- .../functions/table_setColumnOrder.md | 2 +- .../functions/table_setColumnPinning.md | 6 +- .../functions/table_setColumnResizing.md | 2 +- .../functions/table_setColumnSizing.md | 2 +- .../functions/table_setColumnVisibility.md | 2 +- .../functions/table_setGrouping.md | 2 +- .../functions/table_setRowSelection.md | 2 +- .../table_toggleAllColumnsVisible.md | 2 +- .../table_toggleAllPageRowsSelected.md | 2 +- .../functions/table_toggleAllRowsSelected.md | 2 +- docs/reference/static-functions/index.md | 34 +- .../alpine/column-pinning-split/index.html | 32 +- .../alpine/column-pinning-sticky/index.html | 8 +- .../alpine/column-pinning-sticky/src/main.ts | 10 +- examples/alpine/column-pinning/index.html | 8 +- .../column-pinning-split/src/app/app.html | 24 +- .../column-pinning-split/src/app/app.ts | 10 +- .../column-pinning-sticky/src/app/app.html | 8 +- .../column-pinning-sticky/src/app/app.ts | 14 +- .../angular/column-pinning/src/app/app.html | 16 +- .../angular/column-pinning/src/app/app.ts | 4 +- .../angular/kitchen-sink/src/app/app.html | 8 +- examples/angular/kitchen-sink/src/app/app.ts | 12 +- examples/lit/column-pinning-split/src/main.ts | 18 +- .../lit/column-pinning-sticky/src/main.ts | 20 +- examples/lit/column-pinning/src/main.ts | 10 +- examples/lit/kitchen-sink/src/main.ts | 20 +- .../preact/column-pinning-split/src/main.tsx | 32 +- .../preact/column-pinning-sticky/src/main.tsx | 18 +- examples/preact/column-pinning/src/main.tsx | 8 +- examples/preact/kitchen-sink/src/main.tsx | 20 +- .../react/column-pinning-split/src/main.tsx | 32 +- .../react/column-pinning-sticky/src/main.tsx | 18 +- examples/react/column-pinning/src/main.tsx | 8 +- .../data-table/data-table-column-header.tsx | 8 +- .../react/kitchen-sink-chakra-ui/src/main.tsx | 12 +- .../data-table/data-table-column-header.tsx | 8 +- .../react/kitchen-sink-hero-ui/src/main.tsx | 12 +- .../data-table/data-table-column-header.tsx | 8 +- .../react/kitchen-sink-mantine/src/main.tsx | 12 +- .../data-table/data-table-column-header.tsx | 10 +- .../kitchen-sink-material-ui/src/main.tsx | 12 +- .../data-table/data-table-column-header.tsx | 8 +- .../kitchen-sink-react-aria/src/main.tsx | 12 +- .../data-table/data-table-column-header.tsx | 8 +- .../kitchen-sink-shadcn-base/src/main.tsx | 12 +- .../data-table/data-table-column-header.tsx | 8 +- .../kitchen-sink-shadcn-radix/src/main.tsx | 12 +- .../react/kitchen-sink/src/routes/index.tsx | 20 +- .../components/body/MRT_TableBodyCell.tsx | 18 +- .../body/MRT_TableBodyRow.module.css | 12 +- .../buttons/MRT_ColumnPinningButtons.tsx | 4 +- .../footer/MRT_TableFooterCell.module.css | 12 +- .../components/footer/MRT_TableFooterCell.tsx | 18 +- .../head/MRT_TableHeadCell.module.css | 12 +- .../components/head/MRT_TableHeadCell.tsx | 18 +- .../components/menus/MRT_ColumnActionMenu.tsx | 10 +- .../menus/MRT_ShowHideColumnsMenu.tsx | 12 +- .../hooks/useMRT_ColumnVirtualizer.ts | 10 +- .../src/mantine-react-table/types.ts | 8 +- .../buttons/MRT_ColumnPinningButtons.tsx | 6 +- .../head/MRT_TableHeadCellGrabHandle.tsx | 6 +- .../components/menus/MRT_ColumnActionMenu.tsx | 10 +- .../menus/MRT_ShowHideColumnsMenu.tsx | 12 +- .../menus/MRT_ShowHideColumnsMenuItems.tsx | 6 +- .../hooks/useMRT_ColumnVirtualizer.ts | 4 +- .../material-react-table/utils/style.utils.ts | 16 +- .../solid/column-pinning-split/src/App.tsx | 16 +- .../solid/column-pinning-sticky/src/App.tsx | 18 +- examples/solid/column-pinning/src/App.tsx | 8 +- examples/solid/kitchen-sink/src/App.tsx | 20 +- .../column-pinning-split/src/App.svelte | 32 +- .../column-pinning-sticky/src/App.svelte | 30 +- examples/svelte/column-pinning/src/App.svelte | 18 +- examples/svelte/kitchen-sink/src/App.svelte | 18 +- examples/vue/column-pinning-split/src/App.vue | 32 +- .../vue/column-pinning-sticky/src/App.vue | 18 +- examples/vue/column-pinning/src/App.vue | 32 +- examples/vue/kitchen-sink/src/App.vue | 20 +- package.json | 1 + .../tests/angularReactivityFeature.test.ts | 2 +- packages/svelte-table/eslint.config.js | 3 +- .../src/core/headers/buildHeaderGroups.ts | 2 +- .../core/headers/coreHeadersFeature.utils.ts | 14 +- .../columnOrderingFeature.types.ts | 10 +- .../columnOrderingFeature.utils.ts | 18 +- .../column-pinning/columnPinningFeature.ts | 118 +++--- .../columnPinningFeature.types.ts | 74 ++-- .../columnPinningFeature.utils.ts | 308 ++++++++-------- .../column-sizing/columnSizingFeature.ts | 12 +- .../columnSizingFeature.types.ts | 16 +- .../columnSizingFeature.utils.ts | 54 +-- .../columnVisibilityFeature.utils.ts | 20 +- .../headers/coreHeadersFeature.utils.test.ts | 2 +- .../columnOrderingFeature.utils.test.ts | 18 +- .../columnPinningFeature.utils.test.ts | 338 +++++++++--------- .../columnSizingFeature.utils.test.ts | 18 +- pnpm-lock.yaml | 90 ++--- 447 files changed, 3229 insertions(+), 2459 deletions(-) create mode 100644 docs/reference/index/functions/copyInstancePropertiesWithoutMemos.md create mode 100644 docs/reference/index/interfaces/ColumnIndexes.md create mode 100644 docs/reference/index/interfaces/ColumnOffsets.md create mode 100644 docs/reference/index/interfaces/ColumnOffsetsByPosition.md rename docs/reference/static-functions/functions/{row_getLeftVisibleCells.md => row_getEndVisibleCells.md} (53%) rename docs/reference/static-functions/functions/{row_getRightVisibleCells.md => row_getStartVisibleCells.md} (57%) create mode 100644 docs/reference/static-functions/functions/table_getColumnIndexes.md create mode 100644 docs/reference/static-functions/functions/table_getColumnOffsets.md rename docs/reference/static-functions/functions/{table_getLeftFlatHeaders.md => table_getEndFlatHeaders.md} (62%) rename docs/reference/static-functions/functions/{table_getLeftFooterGroups.md => table_getEndFooterGroups.md} (57%) rename docs/reference/static-functions/functions/{table_getRightHeaderGroups.md => table_getEndHeaderGroups.md} (57%) rename docs/reference/static-functions/functions/{table_getLeftLeafColumns.md => table_getEndLeafColumns.md} (58%) rename docs/reference/static-functions/functions/{table_getLeftLeafHeaders.md => table_getEndLeafHeaders.md} (57%) rename docs/reference/static-functions/functions/{table_getLeftTotalSize.md => table_getEndTotalSize.md} (50%) rename docs/reference/static-functions/functions/{table_getLeftVisibleLeafColumns.md => table_getEndVisibleLeafColumns.md} (54%) rename docs/reference/static-functions/functions/{table_getRightFlatHeaders.md => table_getStartFlatHeaders.md} (65%) rename docs/reference/static-functions/functions/{table_getRightFooterGroups.md => table_getStartFooterGroups.md} (59%) rename docs/reference/static-functions/functions/{table_getLeftHeaderGroups.md => table_getStartHeaderGroups.md} (57%) rename docs/reference/static-functions/functions/{table_getRightLeafColumns.md => table_getStartLeafColumns.md} (63%) rename docs/reference/static-functions/functions/{table_getRightLeafHeaders.md => table_getStartLeafHeaders.md} (60%) rename docs/reference/static-functions/functions/{table_getRightTotalSize.md => table_getStartTotalSize.md} (57%) rename docs/reference/static-functions/functions/{table_getRightVisibleLeafColumns.md => table_getStartVisibleLeafColumns.md} (59%) diff --git a/docs/framework/alpine/guide/column-ordering.md b/docs/framework/alpine/guide/column-ordering.md index 1d80cf4f0a..adf0d934cb 100644 --- a/docs/framework/alpine/guide/column-ordering.md +++ b/docs/framework/alpine/guide/column-ordering.md @@ -40,7 +40,7 @@ By default, columns are ordered in the order they are defined in the `columns` a There are 3 table features that can reorder columns, which happen in the following order: -1. [Column Pinning](./column-pinning) - If pinning, columns are split into left, center (unpinned), and right pinned columns. +1. [Column Pinning](./column-pinning) - If pinning, columns are split into start, center (unpinned), and end pinned columns. 2. Manual **Column Ordering** - A manually specified column order is applied. 3. [Grouping](./grouping) - If grouping is enabled, a grouping state is active, and `tableOptions.groupedColumnMode` is set to `'reorder' | 'remove'`, then the grouped columns are reordered to the start of the column flow. @@ -173,9 +173,9 @@ Columns expose helpers for reading their current position after column pinning, ```ts column.getIndex() -column.getIndex('left') +column.getIndex('start') column.getIndex('center') -column.getIndex('right') +column.getIndex('end') column.getIsFirstColumn() column.getIsLastColumn() diff --git a/docs/framework/alpine/guide/column-pinning.md b/docs/framework/alpine/guide/column-pinning.md index 3e333bc043..f6b51b5d80 100644 --- a/docs/framework/alpine/guide/column-pinning.md +++ b/docs/framework/alpine/guide/column-pinning.md @@ -36,17 +36,17 @@ const table = createTable({ ## Column Pinning (Alpine) Guide -TanStack Table offers state and APIs helpful for implementing column pinning features in your table UI. You can implement column pinning in multiple ways. You can either split pinned columns into their own separate tables, or you can keep all columns in the same table, but use the pinning state to order the columns correctly and use sticky CSS to pin the columns to the left or right. +TanStack Table offers state and APIs helpful for implementing column pinning features in your table UI. You can implement column pinning in multiple ways. You can either split pinned columns into their own separate tables, or you can keep all columns in the same table, but use the pinning state to order the columns correctly and use sticky CSS to pin the columns to the start or end. ### How Column Pinning Affects Column Order There are 3 table features that can reorder columns, which happen in the following order: -1. **Column Pinning** - If pinning, columns are split into left, center (unpinned), and right pinned columns. +1. **Column Pinning** - If pinning, columns are split into start, center (unpinned), and end pinned columns. 2. Manual [Column Ordering](./column-ordering) - A manually specified column order is applied. 3. [Grouping](./grouping) - If grouping is enabled, a grouping state is active, and `tableOptions.groupedColumnMode` is set to `'reorder' | 'remove'`, then the grouped columns are reordered to the start of the column flow. -The only way to change the order of the pinned columns is in the `columnPinning.left` and `columnPinning.right` state itself. `columnOrder` state will only affect the order of the unpinned ("center") columns. +The only way to change the order of the pinned columns is in the `columnPinning.start` and `columnPinning.end` state itself. `columnOrder` state will only affect the order of the unpinned ("center") columns. ### Column Pinning State @@ -66,8 +66,8 @@ import type { ColumnPinningState } from '@tanstack/alpine-table' const features = tableFeatures({ columnPinningFeature }) const columnPinningAtom = createAtom({ - left: [], - right: [], + start: [], + end: [], }) // subscribe wherever it is needed @@ -89,7 +89,7 @@ Alternatively, the v8-style `state.columnPinning` plus `onColumnPinningChange` p ```ts const local = Alpine.reactive({ - columnPinning: { left: [], right: [] } as ColumnPinningState, + columnPinning: { start: [], end: [] } as ColumnPinningState, }) const table = createTable({ @@ -119,8 +119,8 @@ const table = createTable({ //... initialState: { columnPinning: { - left: ['expand-column'], - right: ['actions-column'], + start: ['expand-column'], + end: ['actions-column'], }, //... }, @@ -135,11 +135,11 @@ const table = createTable({ There are a handful of useful Column API methods to help you implement column pinning features: - `column.getCanPin`: Use to determine if a column can be pinned. -- `column.pin`: Use to pin a column to the left or right. Or use to unpin a column. +- `column.pin`: Use to pin a column to the start or end. Or use to unpin a column. - `column.getIsPinned`: Use to determine where a column is pinned. - `column.getPinnedIndex`: Use to read the column's index within its pinned column group. -- `column.getStart`: Use to provide the correct `left` CSS value for a pinned column. -- `column.getAfter`: Use to provide the correct `right` CSS value for a pinned column. +- `column.getStart`: Use to provide the correct `start` CSS value for a pinned column. +- `column.getAfter`: Use to provide the correct `end` CSS value for a pinned column. - `column.getIsLastColumn`: Use to determine if a column is the last column in its pinned group. Useful for adding a box-shadow. - `column.getIsFirstColumn`: Use to determine if a column is the first column in its pinned group. Useful for adding a box-shadow. @@ -147,8 +147,8 @@ Use `table.setColumnPinning` to update the pinning state directly. Use `table.re ```ts table.setColumnPinning({ - left: ['firstName'], - right: ['actions'], + start: ['firstName'], + end: ['actions'], }) table.resetColumnPinning() @@ -158,44 +158,44 @@ table.resetColumnPinning(true) The table instance exposes pinned column and header helpers for each region: ```ts -table.getLeftLeafColumns() +table.getStartLeafColumns() table.getCenterLeafColumns() -table.getRightLeafColumns() +table.getEndLeafColumns() -table.getLeftVisibleLeafColumns() +table.getStartVisibleLeafColumns() table.getCenterVisibleLeafColumns() -table.getRightVisibleLeafColumns() +table.getEndVisibleLeafColumns() -table.getLeftHeaderGroups() +table.getStartHeaderGroups() table.getCenterHeaderGroups() -table.getRightHeaderGroups() +table.getEndHeaderGroups() -table.getLeftFooterGroups() +table.getStartFooterGroups() table.getCenterFooterGroups() -table.getRightFooterGroups() +table.getEndFooterGroups() -table.getLeftFlatHeaders() +table.getStartFlatHeaders() table.getCenterFlatHeaders() -table.getRightFlatHeaders() +table.getEndFlatHeaders() -table.getLeftLeafHeaders() +table.getStartLeafHeaders() table.getCenterLeafHeaders() -table.getRightLeafHeaders() +table.getEndLeafHeaders() ``` You can also request pinned leaf columns by region with `table.getPinnedLeafColumns(position)` and visible pinned leaf columns with `table.getPinnedVisibleLeafColumns(position)`. ```ts -table.getPinnedLeafColumns('left') +table.getPinnedLeafColumns('start') table.getPinnedLeafColumns('center') -table.getPinnedLeafColumns('right') +table.getPinnedLeafColumns('end') -table.getPinnedVisibleLeafColumns('left') +table.getPinnedVisibleLeafColumns('start') table.getPinnedVisibleLeafColumns('center') -table.getPinnedVisibleLeafColumns('right') +table.getPinnedVisibleLeafColumns('end') ``` -Use `table.getIsSomeColumnsPinned()` to check if any columns are pinned, or pass `'left'` or `'right'` to check one pinned side. +Use `table.getIsSomeColumnsPinned()` to check if any columns are pinned, or pass `'start'` or `'end'` to check one pinned side. ### Wiring up the pinning UI @@ -211,8 +211,8 @@ Because Alpine does not initialize directives inside content set with `x-html`,