simple-table-core 4.1.5 → 4.1.7

package/dist/utils/filters/createDropdown.d.ts

@@ -18,6 +18,8 @@ export interface CreateDropdownOptions {
     width?: number;
     maxWidth?: number;
     positioning?: "fixed" | "absolute";
+    /** Extra class(es) preserved across open/position updates (e.g. `st-custom-select-dropdown`). */
+    className?: string;
     /**
      * When true, this panel does not clip overflowing descendants (e.g. nested operator menus inside
      * the filter popover). Uses overflow: visible and drops max-height on the shell — see

package/dist/utils/formatters.d.ts

@@ -1,3 +1 @@
 export declare const formatDate: (dateString: string | number | Date) => string;
-export declare const formatCurrency: (value: number) => string;
-export declare const formatLargeNumber: (value: number) => string;

package/dist/utils/headerCell/eventTracking.d.ts

@@ -22,7 +22,7 @@ export declare const getHeaderPositionCache: (container: HTMLElement) => Map<str
 export declare const REVERT_TO_PREVIOUS_HEADERS_DELAY = 150;
 export declare const throttle: (callback: () => void, limit: number) => void;
 export declare const addTrackedEventListener: (element: HTMLElement, event: string, handler: EventListener, options?: AddEventListenerOptions) => void;
-/** Header tooltips are portaled under .simple-table-root; remove them when header DOM is torn down
- *  without pointer leave (e.g. sort/filter invalidates context cache and removes header cells). */
+export declare const getHeaderTooltipEpoch: () => number;
+/** Removes `.st-tooltip` nodes under this table. Pending show timers from before this call do not create a new tooltip. */
 export declare const removeFloatingHeaderTooltips: (fromElement: HTMLElement) => void;
 export declare const cleanupHeaderCellRendering: (container?: HTMLElement, onHostDiscard?: (host: HTMLElement) => void) => void;

package/dist/utils/headerCell/styling.d.ts

@@ -4,4 +4,3 @@ export declare const createHeaderCellElement: (cell: AbsoluteCell, context: Head
 export declare const getLastHeaderIndex: (absoluteCells: AbsoluteCell[]) => number;
 /** Replace sort/filter/collapse icons on an existing header cell, preserving label/drag handlers. */
 export declare const refreshHeaderCellIcons: (cellElement: HTMLElement, header: AbsoluteCell["header"], context: HeaderRenderContext, colIndex: number) => void;
-export declare const updateHeaderCellElement: (cellElement: HTMLElement, cell: AbsoluteCell, context: HeaderRenderContext) => void;

package/dist/utils/headerWidthUtils.d.ts

@@ -49,11 +49,11 @@ export declare function normalizeHeaderWidths(headers: ColumnDef[], totalWidthOr
 /**
  * Get actual width of a header in pixels
  */
-export declare const getHeaderWidthInPixels: (header: ColumnDef) => number;
+export declare const getHeaderWidthInPixels: (header: ColumnDef, searchRoot?: ParentNode | null) => number;
 /**
  * Convert fractional widths to pixel values
  */
-export declare const removeAllFractionalWidths: (header: ColumnDef) => void;
+export declare const removeAllFractionalWidths: (header: ColumnDef, searchRoot?: ParentNode | null) => void;
 /**
  * Calculate the minimum width for a header
  */

package/dist/utils/infiniteScrollUtils.d.ts

@@ -48,7 +48,6 @@ export declare const findRowAtScrollPosition: (scrollTop: number, heightMap: Cum
  * @returns Total extra height from all nested grids above this position
  */
 export declare const getCumulativeExtraHeight: (position: number, heightOffsets?: HeightOffsets) => number;
-export declare const getTotalRowCount: (tableRows: TableRow[]) => number;
 /**
  * Calculate the total height of all rows including nested grids with extra heights
  * @param totalRowCount - Total number of rows

package/dist/utils/parkAndStagger.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Park far-off cell coordinates just outside the visible band, spaced so
+ * they do not stack on the same edge.
+ */
+export type ParkBand = {
+    /** scrollTop (Y) or scrollLeft (X). */
+    scrollOffset: number;
+    /** clientHeight (Y) or clientWidth (X). */
+    clientSize: number;
+};
+export type ParkItem = {
+    id: string;
+    truePos: number;
+    cellSize: number;
+    /**
+     * Park on this side even when `truePos` overlaps the visible band.
+     * Used for incoming cells whose conceptual origin is in-view but the
+     * cell itself was not in the DOM — they still slide in from an edge.
+     */
+    forceSide?: "before" | "after";
+    /**
+     * Keep `truePos` even when it sits outside the band. Used for cells that
+     * are already in the DOM so the slide starts from where they currently look.
+     */
+    holdTruePos?: boolean;
+};
+export type ParkAndStaggerOptions = {
+    /** Extra space between parked cells. Defaults to 0. */
+    gap?: number;
+    /** Gap between the viewport edge and the first parked cell. Defaults to that cell's size. */
+    margin?: number;
+};
+/** True when the cell's box overlaps the visible band. */
+export declare const isNearViewport: (truePos: number, cellSize: number, band: ParkBand) => boolean;
+/**
+ * Map each item to a coordinate: true position when near the viewport,
+ * otherwise just outside the matching edge, staggered by slot.
+ *
+ * Slot 0 is closest to the visible edge. Order on each side follows
+ * `truePos` so destination order is preserved. Parks stay between the
+ * edge and the true position, and the stagger never spreads more than
+ * one viewport beyond the first parked cell.
+ */
+export declare const parkAndStagger: (items: ParkItem[], band: ParkBand, options?: ParkAndStaggerOptions) => Map<string, number>;

package/dist/utils/resizeUtils/domUpdates.d.ts

@@ -12,4 +12,4 @@ export declare const getRootPinned: (header: ColumnDef, headers: ColumnDef[]) =>
  * @param collapsedHeaders - Set of collapsed header accessors; only visible children are laid out (matches findLeafHeaders / SectionRenderer).
  * @param overrideWidths - Optional map of accessor -> width to use for position calculation (e.g. after resize so DOM reflects just-set value)
  */
-export declare const updateColumnWidthsInDOM: (headers: ColumnDef[], collapsedHeaders?: Set<string>, overrideWidths?: Map<string, number>) => void;
+export declare const updateColumnWidthsInDOM: (headers: ColumnDef[], collapsedHeaders?: Set<string>, overrideWidths?: Map<string, number>, tableRoot?: ParentNode | null) => void;

package/dist/utils/resizeUtils/maxWidth.d.ts

@@ -2,8 +2,9 @@ import type ColumnDef from "../../types/ColumnDef";
 /**
  * Calculate the maximum allowable width for a header based on container constraints
  */
-export declare const calculateMaxHeaderWidth: ({ header, headers, collapsedHeaders, }: {
+export declare const calculateMaxHeaderWidth: ({ header, headers, collapsedHeaders, tableRoot, }: {
     header: ColumnDef;
     headers: ColumnDef[];
     collapsedHeaders?: Set<string>;
+    tableRoot?: ParentNode | null;
 }) => number;

package/dist/utils/rowSelectionUtils.d.ts

@@ -11,10 +11,6 @@ export declare const shouldShowRowSelectionColumn: (config: {
     showRowSelectionColumn?: boolean;
     rowButtons?: unknown[];
 }) => boolean;
-/**
- * Get the set of selected row IDs from an array of table rows
- */
-export declare const getSelectedRowIds: (tableRows: TableRow[]) => string[];
 /**
  * Check if a specific row is selected
  */

package/dist/utils/rowSeparatorRenderer.d.ts

@@ -13,4 +13,3 @@ export interface CreateRowSeparatorOptions {
 /** Keep separator width in sync with section layout (resize, pinned width changes). */
 export declare const applyRowSeparatorSectionWidth: (separator: HTMLElement, sectionWidthPx?: number) => void;
 export declare const createRowSeparator: (options: CreateRowSeparatorOptions) => HTMLElement;
-export declare const createSpacerRow: (position: number, rowHeight: number, heightOffsets: HeightOffsets | undefined, customTheme: CustomTheme, className: string, height?: number) => HTMLElement;

package/dist/utils/rowUtils.d.ts

@@ -1,8 +1,6 @@
-import TableRow from "../types/TableRow";
 import Row from "../types/Row";
-import ColumnDef, { Accessor } from "../types/ColumnDef";
+import { Accessor } from "../types/ColumnDef";
 import CellValue from "../types/CellValue";
-import RowState from "../types/RowState";
 import { CustomTheme } from "../types/CustomTheme";
 import { GetRowId } from "../types/GetRowId";
 import { GenerateRowIdParams } from "../types/GenerateRowIdParams";
@@ -161,27 +159,3 @@ export declare const hasNestedRows: (row: Row, groupingKey?: string) => boolean;
  * @returns true if the row is expanded, false otherwise
  */
 export declare const isRowExpanded: (expandStateRowId: string | number, depth: number, expandedDepths: Set<number>, expandedRows: Map<string, number>, collapsedRows: Map<string, number>) => boolean;
-/**
- * Flatten rows recursively based on row grouping configuration
- * Now calculates ALL properties including position and isLastGroupRow
- * Also injects special state rows for loading/error/empty states (only if renderers are available)
- * Also injects nested grid rows when a header has nestedTable configuration
- */
-export declare const flattenRowsWithGrouping: ({ depth, expandedDepths, expandedRows, collapsedRows, rowGrouping, getRowId, rows, displayPositionOffset, rowStateMap, hasLoadingRenderer, hasErrorRenderer, hasEmptyRenderer, headers, rowHeight, headerHeight, customTheme, }: {
-    depth?: number;
-    expandedDepths: Set<number>;
-    expandedRows: Map<string, number>;
-    collapsedRows: Map<string, number>;
-    rowGrouping?: Accessor[];
-    getRowId?: GetRowId;
-    rows: Row[];
-    displayPositionOffset?: number;
-    rowStateMap?: Map<string | number, RowState>;
-    hasLoadingRenderer?: boolean;
-    hasErrorRenderer?: boolean;
-    hasEmptyRenderer?: boolean;
-    headers?: ColumnDef[];
-    rowHeight: number;
-    headerHeight: number;
-    customTheme: CustomTheme;
-}) => TableRow[];

package/dist/utils/setAbsoluteCellPosition.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Write absolute `left`/`top` while preserving an in-flight FLIP visual position.
+ *
+ * FLIP inverts use `transform: translate3d(...)` relative to `style.left/top`.
+ * Updating left/top without adjusting that translate moves the painted cell by
+ * the same delta — then `play()` "corrects" it with a new invert, which reads
+ * as a jump during rapid reorders.
+ *
+ * Column-drag does NOT compensate here: {@link CellSlideAnimator} snapshots
+ * visuals before left writes and applies the hold+tween after.
+ */
+export declare const setFlipCompensationEnabled: (enabled: boolean) => void;
+/** Parse translate/matrix CSS into tx/ty. */
+export declare const parseCssTranslate: (transform: string) => {
+    x: number;
+    y: number;
+} | null;
+/**
+ * Painted translate in style.left/top space. Prefers the computed matrix so a
+ * running WAAPI slide is not mistaken for its start keyframe (`style.transform`
+ * stays at the invert until the animation finishes).
+ */
+export declare const readLiveTranslate: (element: HTMLElement) => {
+    x: number;
+    y: number;
+} | null;
+/**
+ * Set absolute cell coordinates, compensating any active FLIP translate so the
+ * visual position does not drift when the logical slot moves.
+ */
+export declare const setAbsoluteCellPosition: (element: HTMLElement, nextLeft: number, nextTop: number) => void;

package/dist/utils/stateRowRenderer.d.ts

@@ -12,4 +12,3 @@ export interface StateRowRenderContext {
     emptyStateRenderer?: EmptyStateRenderer;
 }
 export declare const createStateRow: (tableRow: TableRowType, context: StateRowRenderContext) => HTMLElement;
-export declare const cleanupStateRow: (rowElement: HTMLElement) => void;

package/dist/utils/tableDomScope.d.ts

@@ -0,0 +1,20 @@
+/** Class on the per-instance table wrapper created by DOMManager. */
+export declare const TABLE_ROOT_CLASS = "simple-table-root";
+export declare const TABLE_ROOT_SELECTOR = ".simple-table-root";
+/** Walks up from `from` to this table's `.simple-table-root`, or null. */
+export declare const resolveTableRoot: (from: Element | null | undefined) => HTMLElement | null;
+/**
+ * True when `el` belongs to this table instance, not a nested table inside it.
+ * Nested grids mount their own `.simple-table-root` under the parent.
+ */
+export declare const isOwnedByTable: (root: Element, el: Element) => boolean;
+/**
+ * `querySelectorAll` within `root`, skipping nodes that belong to a nested table.
+ * Pass this instance's `.simple-table-root` (or any descendant of it).
+ */
+export declare const queryAllInTable: <E extends Element = HTMLElement>(root: ParentNode | null | undefined, selector: string) => E[];
+/** First match of `queryAllInTable`, or null. */
+export declare const queryInTable: <E extends Element = HTMLElement>(root: ParentNode | null | undefined, selector: string) => E | null;
+/** Looks up an element by `id` inside this table, not `document.getElementById`. */
+export declare const getElementByIdInTable: (root: ParentNode | null | undefined, id: string) => HTMLElement | null;
+export declare const escapeTableAttrValue: (value: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-table-core",
-  "version": "4.1.5",
+  "version": "4.1.7",
   "main": "dist/cjs/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -42,11 +42,11 @@
     "@storybook/test-runner": "^0.19.1",
     "@types/node": "^16.18.111",
     "cssnano": "^7.0.6",
+    "playwright": "1.58.2",
     "postcss-calc": "^10.1.1",
     "postcss-custom-properties": "^14.0.4",
     "postcss-import": "^16.1.0",
     "postcss-preset-env": "^10.1.5",
-    "playwright": "1.58.2",
     "rollup": "^2.79.2",
     "rollup-plugin-delete": "^2.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -57,7 +57,8 @@
     "storybook": "^8.6.14",
     "ts-loader": "^9.5.4",
     "tslib": "^2.8.1",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "vitest": "^2.1.9"
   },
   "browserslist": {
     "production": [

package/src/styles/base.css

@@ -86,7 +86,7 @@
   font-family: inherit;
 }
 
-input {
+.simple-table-root input {
   color: black;
 }
 
@@ -206,7 +206,7 @@ input {
   display: block;
   /* `*` does not target ::after; border-box keeps the bottom border inside the flex line. */
   box-sizing: border-box;
-  width: var(--st-after-width, default-width);
+  width: var(--st-after-width, 11.01px);
   flex-shrink: 0;
   background-color: var(--st-header-background-color);
   border-bottom: var(--st-border-width) solid var(--st-border-color);
@@ -218,11 +218,6 @@ input {
   border-bottom: var(--st-border-width) solid var(--st-border-color);
 }
 
-.st-header-grid {
-  position: relative;
-  min-width: 100%;
-}
-
 .st-horizontal-scrollbar-middle,
 .st-horizontal-scrollbar-left,
 .st-horizontal-scrollbar-right,
@@ -373,12 +368,6 @@ input {
   background-color: var(--st-selected-row-background-color);
 }
 
-.st-sticky-top
-  .st-row.hovered:not(.st-cell-editing):not(.st-cell-column-selected):not(
-    .st-cell-column-selected-last
-  ):not(.st-cell-column-selected-first) {
-  background-color: var(--st-hover-row-background-color);
-}
 .st-row.hovered .st-cell-editing,
 .st-row.hovered
   .st-cell:not(.st-cell-selected):not(.st-cell-selected-first):not(.st-cell-column-selected):not(
@@ -497,9 +486,6 @@ input {
 .st-header-cell.st-header-editable {
   cursor: pointer;
 }
-.st-header-cell.draggable {
-  cursor: grab;
-}
 .st-header-cell.st-header-selected {
   background-color: var(--st-header-selected-background-color);
 }
@@ -727,10 +713,6 @@ input {
   outline-offset: 2px;
 }
 
-.st-collapse-icon-container {
-  cursor: pointer;
-}
-
 .st-expand-icon {
   cursor: pointer;
   color: var(--st-header-label-color);
@@ -774,6 +756,40 @@ input {
 .st-dragging.st-sub-header {
   background-color: var(--st-dragging-sub-header-background-color);
 }
+/* Keep the dragged header above neighbors while they slide past (DOM order
+   would otherwise flip who paints on top mid-animation). */
+.st-header-cell.st-dragging {
+  z-index: 2;
+}
+
+/*
+ * Column-drag / FLIP pass-through paint.
+ *
+ * Body cells use `background-color: transparent` so a shared row fill shows
+ * through — when two cells slide past each other you see labels overlap, not
+ * opaque rectangles stacking. Neighboring headers do the same during reorder
+ * (the header strip already paints `--st-header-background-color`).
+ * `.st-flip-active` covers slides that continue after dragend.
+ *
+ * The dragged header keeps `--st-dragging-background-color` (see below) so the
+ * active column stays visually marked.
+ */
+.simple-table-root.st-column-reordering .st-header-cell,
+.simple-table-root.st-column-reordering .st-header-cell.st-sub-header,
+.st-header-cell.st-flip-active,
+.st-header-cell.st-flip-active.st-sub-header {
+  background-color: transparent;
+}
+
+/* Dragged header fill wins over the pass-through rule above. */
+.simple-table-root.st-column-reordering .st-header-cell.st-dragging:not(.st-sub-header),
+.st-header-cell.st-flip-active.st-dragging:not(.st-sub-header) {
+  background-color: var(--st-dragging-background-color);
+}
+.simple-table-root.st-column-reordering .st-header-cell.st-dragging.st-sub-header,
+.st-header-cell.st-flip-active.st-dragging.st-sub-header {
+  background-color: var(--st-dragging-sub-header-background-color);
+}
 
 /* Loading skeleton styles */
 .st-loading-skeleton {
@@ -1153,6 +1169,8 @@ input {
   touch-action: auto;
   border-left: var(--st-border-width) solid var(--st-border-color);
   height: 100%;
+  min-height: 0;
+  overflow: hidden;
 }
 
 /* Column Editor Search Wrapper */
@@ -1164,10 +1182,6 @@ input {
   padding: var(--st-spacing-medium);
 }
 
-/* Column Editor Search Styles */
-.st-column-editor-search {
-}
-
 /* Column Editor List */
 .st-column-editor-list {
   display: flex;
@@ -1194,6 +1208,108 @@ input {
   padding: var(--st-spacing-small) var(--st-spacing-medium) 0;
 }
 
+/* Pivot panel — fill popout height and scroll when zones overflow */
+.st-pivot-panel {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  color: var(--st-column-editor-text-color);
+  font-size: var(--st-overlay-font-size);
+}
+
+.st-pivot-panel-zone + .st-pivot-panel-zone {
+  border-top: var(--st-border-width) solid var(--st-border-color);
+}
+
+.st-pivot-panel-zone-title {
+  font-size: var(--st-overlay-font-size);
+  font-weight: 600;
+  color: var(--st-column-editor-text-color);
+  padding: var(--st-spacing-medium) var(--st-spacing-medium) var(--st-spacing-small);
+}
+
+.st-pivot-panel-zone-list {
+  padding-top: 0;
+  padding-bottom: var(--st-spacing-medium);
+}
+
+.st-pivot-panel-zone-empty {
+  padding-top: var(--st-spacing-small);
+  font-size: var(--st-overlay-font-size);
+  color: var(--st-column-editor-text-color);
+  opacity: 0.55;
+}
+
+.st-pivot-panel-field,
+.st-pivot-panel-chip {
+  display: flex;
+  align-items: center;
+  gap: var(--st-spacing-small);
+  padding-top: var(--st-spacing-small);
+  padding-bottom: var(--st-spacing-small);
+  color: var(--st-column-editor-text-color);
+}
+
+.st-pivot-panel-field-label,
+.st-pivot-panel-chip-label {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--st-overlay-font-size);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.st-pivot-panel-field-actions {
+  display: flex;
+  gap: var(--st-spacing-small);
+  flex-shrink: 0;
+}
+
+.st-pivot-panel-action {
+  padding: var(--st-spacing-small) var(--st-spacing-medium);
+  font-size: var(--st-overlay-font-size);
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--st-column-editor-text-color);
+  background: transparent;
+  border: var(--st-border-width) solid var(--st-border-color);
+  border-radius: var(--st-border-radius);
+  cursor: pointer;
+  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
+}
+
+.st-pivot-panel-action:hover {
+  background-color: var(--st-button-hover-background-color);
+}
+
+.st-pivot-panel-remove {
+  flex-shrink: 0;
+  color: var(--st-column-editor-text-color);
+}
+
+/* Aggregation select — same size tokens as filter CustomSelect */
+.st-pivot-panel-agg {
+  width: auto;
+  min-width: 6.5rem;
+  max-width: 9rem;
+  flex-shrink: 0;
+}
+
+.st-pivot-panel-agg .st-custom-select-trigger {
+  background-color: transparent;
+  color: var(--st-column-editor-text-color);
+}
+
+.st-pivot-panel-agg .st-custom-select-value {
+  color: var(--st-column-editor-text-color);
+}
+
+.st-pivot-panel-agg .st-custom-select-arrow {
+  color: var(--st-column-editor-text-color);
+}
+
 .st-column-editor-list-section {
   padding-top: 0;
   padding-bottom: var(--st-spacing-small);
@@ -1242,12 +1358,6 @@ input {
   background: color-mix(in srgb, var(--st-column-editor-text-color) 12%, transparent);
 }
 
-.st-column-pin-pinned-mark {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 /* Pinned left/right: same surface as .st-column-pin-btn:hover */
 .st-column-pin-pinned-active {
   background: color-mix(in srgb, var(--st-column-editor-text-color) 12%, transparent);
@@ -1391,11 +1501,6 @@ input {
   align-items: center;
 }
 
-.st-nested-headers {
-  display: flex;
-  flex-direction: column;
-}
-
 .st-column-editor-popout.open {
   min-width: 240px;
   width: auto;
@@ -1462,77 +1567,6 @@ input {
   color: var(--st-button-active-text-color);
 }
 
-@keyframes slide-in-left {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slide-in-right {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-/* Group Header Styles */
-.st-group-header {
-  background-color: var(--st-header-background-color);
-  cursor: pointer;
-  user-select: none;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  border-bottom: var(--st-border-width) solid var(--st-border-color);
-  color: var(--st-cell-color);
-  font-weight: 500;
-  transition: background-color var(--st-transition-duration) var(--st-transition-ease);
-}
-
-.st-group-header:hover {
-  background-color: var(--st-button-hover-background-color);
-}
-
-.st-group-header-content {
-  display: flex;
-  align-items: center;
-  gap: var(--st-spacing-medium);
-}
-
-.st-group-toggle-icon {
-  font-size: 0.8em;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.st-group-name {
-  font-weight: 600;
-}
-
-.st-group-count {
-  color: var(--st-cell-odd-row-color);
-  font-size: 0.9em;
-}
-
-/* Animation for expand/collapse */
-.st-group-header.expanded .st-group-toggle-icon {
-  transform: rotate(0deg);
-  transition: transform var(--st-transition-duration) var(--st-transition-ease);
-}
-
-.st-group-header.collapsed .st-group-toggle-icon {
-  transform: rotate(-90deg);
-  transition: transform var(--st-transition-duration) var(--st-transition-ease);
-}
-
 /* Row expand icon animation */
 .st-expand-icon-container {
   transition: transform var(--st-transition-duration) var(--st-transition-ease);
@@ -1718,12 +1752,6 @@ input {
   color: var(--st-selected-cell-color);
 }
 
-.st-dropdown-divider {
-  height: 1px;
-  margin: 4px 0;
-  background-color: var(--st-border-color);
-}
-
 /* Datepicker css */
 
 .st-datepicker {
@@ -1933,25 +1961,6 @@ input {
   margin-bottom: var(--st-spacing-medium);
 }
 
-/* Filter Select - Dropdown selectors */
-.st-filter-select {
-  width: 100%;
-  padding: var(--st-control-padding-y) var(--st-control-padding-x);
-  border: var(--st-border-width) solid var(--st-border-color);
-  border-radius: var(--st-border-radius);
-  font-size: var(--st-overlay-font-size);
-  background-color: var(--st-odd-row-background-color);
-  color: var(--st-cell-color);
-  font-family: inherit;
-  cursor: pointer;
-  outline: none;
-  transition: border-color var(--st-transition-duration) var(--st-transition-ease);
-}
-
-.st-filter-select:focus {
-  border-color: var(--st-editable-cell-focus-border-color);
-}
-
 /* Filter Actions - Button container and buttons */
 .st-filter-actions {
   display: flex;
@@ -2178,14 +2187,6 @@ input {
   font-style: italic;
 }
 
-/* Row number styling */
-.st-row-number {
-  font-size: 0.8em;
-  opacity: 0.6;
-  user-select: none;
-  font-weight: 500;
-}
-
 /* Selection cell with row buttons layout */
 .st-selection-cell-content {
   display: flex;
@@ -2261,6 +2262,10 @@ input {
   animation: st-tooltip-fade-in 0.2s ease-out;
 }
 
+.simple-table-root.st-column-reordering .st-tooltip {
+  display: none;
+}
+
 @keyframes st-tooltip-fade-in {
   from {
     opacity: 0;
@@ -2283,14 +2288,6 @@ input {
   width: 100%;
 }
 
-/* Empty spacer for pinned sections when state row is shown */
-.st-row.st-state-row-spacer {
-  display: block;
-  position: absolute;
-  width: 100%;
-  background-color: transparent;
-}
-
 /* The cell within state row that spans full width */
 .st-state-row-cell {
   grid-column: 1 / -1;