@tanstack/table-core 9.0.0-alpha.4 → 9.0.0-alpha.42

package/src/features/stockFeatures.ts

@@ -0,0 +1,48 @@
+import { columnFacetingFeature } from './column-faceting/columnFacetingFeature'
+import { columnFilteringFeature } from './column-filtering/columnFilteringFeature'
+import { columnGroupingFeature } from './column-grouping/columnGroupingFeature'
+import { columnOrderingFeature } from './column-ordering/columnOrderingFeature'
+import { columnPinningFeature } from './column-pinning/columnPinningFeature'
+import { columnResizingFeature } from './column-resizing/columnResizingFeature'
+import { columnSizingFeature } from './column-sizing/columnSizingFeature'
+import { columnVisibilityFeature } from './column-visibility/columnVisibilityFeature'
+import { globalFilteringFeature } from './global-filtering/globalFilteringFeature'
+import { rowExpandingFeature } from './row-expanding/rowExpandingFeature'
+import { rowPaginationFeature } from './row-pagination/rowPaginationFeature'
+import { rowPinningFeature } from './row-pinning/rowPinningFeature'
+import { rowSelectionFeature } from './row-selection/rowSelectionFeature'
+import { rowSortingFeature } from './row-sorting/rowSortingFeature'
+
+export interface StockFeatures {
+  columnFacetingFeature: typeof columnFacetingFeature
+  columnFilteringFeature: typeof columnFilteringFeature
+  columnGroupingFeature: typeof columnGroupingFeature
+  columnOrderingFeature: typeof columnOrderingFeature
+  columnPinningFeature: typeof columnPinningFeature
+  columnResizingFeature: typeof columnResizingFeature
+  columnSizingFeature: typeof columnSizingFeature
+  columnVisibilityFeature: typeof columnVisibilityFeature
+  globalFilteringFeature: typeof globalFilteringFeature
+  rowExpandingFeature: typeof rowExpandingFeature
+  rowPaginationFeature: typeof rowPaginationFeature
+  rowPinningFeature: typeof rowPinningFeature
+  rowSelectionFeature: typeof rowSelectionFeature
+  rowSortingFeature: typeof rowSortingFeature
+}
+
+export const stockFeatures: StockFeatures = {
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnGroupingFeature,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  globalFilteringFeature,
+  rowExpandingFeature,
+  rowPaginationFeature,
+  rowPinningFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+} as const

package/src/flex-render.ts

@@ -0,0 +1,60 @@
+import type { Cell } from './types/Cell'
+import type { Header } from './types/Header'
+import type { TableFeatures } from './types/TableFeatures'
+import type { CellData, RowData } from './types/type-utils'
+
+export function flexRender<TProps extends object>(
+  comp: unknown,
+  props: TProps,
+): unknown | null {
+  if (comp == null) return null
+
+  if (typeof comp === 'function') {
+    return comp(props)
+  }
+
+  return comp
+}
+
+export type FlexRenderProps<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+> =
+  | { cell: Cell<TFeatures, TData, TValue>; header?: never; footer?: never }
+  | {
+      header: Header<TFeatures, TData, TValue>
+      cell?: never
+      footer?: never
+    }
+  | {
+      footer: Header<TFeatures, TData, TValue>
+      cell?: never
+      header?: never
+    }
+
+export function FlexRender<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TValue extends CellData = CellData,
+>(props: FlexRenderProps<TFeatures, TData, TValue>): unknown | null {
+  if ('cell' in props && props.cell) {
+    return flexRender(props.cell.column.columnDef.cell, props.cell.getContext())
+  }
+
+  if ('header' in props && props.header) {
+    return flexRender(
+      props.header.column.columnDef.header,
+      props.header.getContext(),
+    )
+  }
+
+  if ('footer' in props && props.footer) {
+    return flexRender(
+      props.footer.column.columnDef.footer,
+      props.footer.getContext(),
+    )
+  }
+
+  return null
+}

package/src/fns/aggregationFns.ts

@@ -0,0 +1,220 @@
+import { isNumberArray } from '../utils'
+import type { RowData } from '../types/type-utils'
+import type { TableFeatures } from '../types/TableFeatures'
+import type { Row } from '../types/Row'
+import type { AggregationFn } from '../features/column-grouping/columnGroupingFeature.types'
+
+/**
+ * Aggregation function for summing up the values of a column.
+ */
+export const aggregationFn_sum: AggregationFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  columnId: string,
+  _leafRows: Array<Row<any, any>>,
+  childRows: Array<Row<any, any>>,
+) => {
+  // It's faster to just add the aggregations together instead of
+  // process leaf nodes individually
+  return childRows.reduce((sumValue, next) => {
+    const nextValue = next.getValue(columnId)
+    return sumValue + (typeof nextValue === 'number' ? nextValue : 0)
+  }, 0)
+}
+
+/**
+ * Aggregation function for finding the minimum value of a column.
+ */
+export const aggregationFn_min: AggregationFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  columnId: string,
+  _leafRows: Array<Row<any, any>>,
+  childRows: Array<Row<any, any>>,
+) => {
+  let minValue: number | undefined
+
+  childRows.forEach((row) => {
+    const value = row.getValue(columnId)
+
+    if (
+      value != null &&
+      typeof value === 'number' &&
+      (minValue === undefined || value < minValue)
+    ) {
+      minValue = value
+    }
+  })
+
+  return minValue
+}
+
+/**
+ * Aggregation function for finding the maximum value of a column.
+ */
+export const aggregationFn_max: AggregationFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  columnId: string,
+  _leafRows: Array<Row<any, any>>,
+  childRows: Array<Row<any, any>>,
+) => {
+  let maxValue: number | undefined
+
+  childRows.forEach((row) => {
+    const value = row.getValue(columnId)
+    if (
+      value != null &&
+      typeof value === 'number' &&
+      (maxValue === undefined || value > maxValue)
+    ) {
+      maxValue = value
+    }
+  })
+
+  return maxValue
+}
+
+/**
+ * Aggregation function for finding the extent (min and max) of a column.
+ */
+export const aggregationFn_extent: AggregationFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  columnId: string,
+  _leafRows: Array<Row<any, any>>,
+  childRows: Array<Row<any, any>>,
+) => {
+  let minValue: number | undefined
+  let maxValue: number | undefined
+
+  childRows.forEach((row) => {
+    const value = row.getValue(columnId)
+    if (value != null && typeof value === 'number') {
+      if (minValue === undefined) {
+        minValue = maxValue = value
+      } else {
+        if (minValue > value) minValue = value
+        if (maxValue! < value) maxValue = value
+      }
+    }
+  })
+
+  return [minValue, maxValue]
+}
+
+/**
+ * Aggregation function for finding the mean (average) of a column.
+ */
+export const aggregationFn_mean: AggregationFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  columnId: string,
+  leafRows: Array<Row<any, any>>,
+) => {
+  let count = 0
+  let sumValue = 0
+
+  leafRows.forEach((row) => {
+    const value = row.getValue(columnId)
+    if (value != null && typeof value === 'number') {
+      ++count
+      sumValue += value
+    } else if (value != null) {
+      const numValue = +value
+      if (!Number.isNaN(numValue)) {
+        ++count
+        sumValue += numValue
+      }
+    }
+  })
+
+  if (count) return sumValue / count
+
+  return
+}
+
+/**
+ * Aggregation function for finding the median value of a column.
+ */
+export const aggregationFn_median: AggregationFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  columnId: string,
+  leafRows: Array<Row<any, any>>,
+) => {
+  if (!leafRows.length) {
+    return
+  }
+
+  const values = leafRows.map((row) => row.getValue(columnId))
+  if (!isNumberArray(values)) {
+    return
+  }
+  if (values.length === 1) {
+    return values[0]
+  }
+
+  const mid = Math.floor(values.length / 2)
+  const nums = values.sort((a, b) => a - b)
+  return values.length % 2 !== 0 ? nums[mid] : (nums[mid - 1]! + nums[mid]!) / 2
+}
+
+/**
+ * Aggregation function for finding the unique values of a column.
+ */
+export const aggregationFn_unique: AggregationFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  columnId: string,
+  leafRows: Array<Row<any, any>>,
+) => {
+  return Array.from(new Set(leafRows.map((d) => d.getValue(columnId))).values())
+}
+
+/**
+ * Aggregation function for finding the count of unique values of a column.
+ */
+export const aggregationFn_uniqueCount: AggregationFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  columnId: string,
+  leafRows: Array<Row<any, any>>,
+) => {
+  return new Set(leafRows.map((d) => d.getValue(columnId))).size
+}
+
+/**
+ * Aggregation function for counting the number of rows in a column.
+ */
+export const aggregationFn_count: AggregationFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  _columnId: string,
+  leafRows: Array<Row<any, any>>,
+) => {
+  return leafRows.length
+}
+
+export const aggregationFns = {
+  sum: aggregationFn_sum,
+  min: aggregationFn_min,
+  max: aggregationFn_max,
+  extent: aggregationFn_extent,
+  mean: aggregationFn_mean,
+  median: aggregationFn_median,
+  unique: aggregationFn_unique,
+  uniqueCount: aggregationFn_uniqueCount,
+  count: aggregationFn_count,
+}
+
+export type BuiltInAggregationFn = keyof typeof aggregationFns

package/src/fns/filterFns.ts

@@ -0,0 +1,379 @@
+import type { RowData } from '../types/type-utils'
+import type { TableFeatures } from '../types/TableFeatures'
+import type { Row } from '../types/Row'
+import type { FilterFn } from '../features/column-filtering/columnFilteringFeature.types'
+
+// Basic filters
+
+/**
+ * Filter function for checking if a value is exactly equal to a given value. (JS === comparison)
+ */
+export const filterFn_equals: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValue: unknown,
+) => {
+  return row.getValue(columnId) === filterValue
+}
+
+filterFn_equals.autoRemove = (val: any) => testFalsy(val)
+
+/**
+ * Filter function for checking if a value is weakly equal to a given value. (JS == comparison)
+ */
+export const filterFn_weakEquals: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValue: unknown,
+) => {
+  return row.getValue(columnId) == filterValue
+}
+
+filterFn_weakEquals.autoRemove = (val: any) => testFalsy(val)
+
+// String filters
+
+/**
+ * Filter function for checking if a string includes a given substring. (Case-sensitive)
+ */
+export const filterFn_includesStringSensitive: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValue: string,
+) => {
+  return Boolean(
+    row.getValue(columnId)?.toString().includes(filterValue.toString()),
+  )
+}
+
+filterFn_includesStringSensitive.autoRemove = (val: any) => testFalsy(val)
+
+/**
+ * Filter function for checking if a string includes a given substring. (Non-case-sensitive)
+ */
+export const filterFn_includesString: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValue: string,
+) => {
+  return Boolean(
+    row
+      .getValue(columnId)
+      ?.toString()
+      .toLowerCase()
+      .includes(filterValue.toString().toLowerCase()),
+  )
+}
+
+filterFn_includesString.autoRemove = (val: any) => testFalsy(val)
+
+/**
+ * Filter function for checking if a string is exactly equal to a given string. (Non-case-sensitive)
+ */
+export const filterFn_equalsString: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValue: string,
+) => {
+  return (
+    row.getValue(columnId)?.toString().toLowerCase() ===
+    filterValue.toLowerCase()
+  )
+}
+
+filterFn_equalsString.autoRemove = (val: any) => testFalsy(val)
+
+/**
+ * Filter function for checking if a string is exactly equal to a given string. (Case-sensitive)
+ */
+export const filterFn_equalsStringSensitive: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValue: string,
+) => {
+  return row.getValue(columnId)?.toString() === filterValue
+}
+
+filterFn_equalsStringSensitive.autoRemove = (val: any) => testFalsy(val)
+
+// Number filters
+
+/**
+ * Filter function for checking if a number is greater than a given number.
+ */
+export const filterFn_greaterThan: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValue: Date | number | string,
+) => {
+  const rowValue = row.getValue(columnId)
+  const numericRowValue =
+    rowValue === null || rowValue === undefined ? 0 : +rowValue
+  const numericFilterValue = +filterValue
+
+  if (!isNaN(numericFilterValue) && !isNaN(numericRowValue)) {
+    return numericRowValue > numericFilterValue
+  }
+
+  const stringValue = (rowValue ?? '').toString().toLowerCase().trim()
+  const stringFilterValue = filterValue.toString().toLowerCase().trim()
+  return stringValue > stringFilterValue
+}
+
+filterFn_greaterThan.resolveFilterValue = (val: any) => testFalsy(val)
+
+/**
+ * Filter function for checking if a number is greater than or equal to a given number.
+ */
+export const filterFn_greaterThanOrEqualTo: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValue: Date | number | string,
+) => {
+  return (
+    filterFn_greaterThan(row as any, columnId, filterValue) ||
+    filterFn_equals(row as any, columnId, filterValue)
+  )
+}
+
+filterFn_greaterThanOrEqualTo.resolveFilterValue = (val: any) => testFalsy(val)
+
+/**
+ * Filter function for checking if a number is less than a given number.
+ */
+export const filterFn_lessThan: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValue: Date | number | string,
+) => {
+  return !filterFn_greaterThanOrEqualTo(row as any, columnId, filterValue)
+}
+
+filterFn_lessThan.resolveFilterValue = (val: any) => testFalsy(val)
+
+/**
+ * Filter function for checking if a number is less than or equal to a given number.
+ */
+export const filterFn_lessThanOrEqualTo: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValue: Date | number | string,
+) => {
+  return !filterFn_greaterThan(row as any, columnId, filterValue)
+}
+
+filterFn_lessThanOrEqualTo.resolveFilterValue = (val: any) => testFalsy(val)
+
+// Range filters
+
+/**
+ * Filter function for checking if a number or a string is between two given values.
+ */
+const filterFn_between: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValues: [number | string, number | string],
+): boolean =>
+  ((['', undefined] as Array<any>).includes(filterValues[0]) ||
+    filterFn_greaterThan(row as any, columnId, filterValues[0])) &&
+  ((!isNaN(+filterValues[0]) &&
+    !isNaN(+filterValues[1]) &&
+    +filterValues[0] > +filterValues[1]) ||
+    (['', undefined] as Array<any>).includes(filterValues[1]) ||
+    filterFn_lessThan(row as any, columnId, filterValues[1]))
+
+filterFn_between.autoRemove = (val: any) => !val
+
+/**
+ * Filter function for checking if a number or a string is between two given values or equal to them.
+ */
+const filterFn_betweenInclusive: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValues: [number | string, number | string],
+): boolean =>
+  ((['', undefined] as Array<any>).includes(filterValues[0]) ||
+    filterFn_greaterThanOrEqualTo(row as any, columnId, filterValues[0])) &&
+  ((!isNaN(+filterValues[0]) &&
+    !isNaN(+filterValues[1]) &&
+    +filterValues[0] > +filterValues[1]) ||
+    (['', undefined] as Array<any>).includes(filterValues[1]) ||
+    filterFn_lessThanOrEqualTo(row as any, columnId, filterValues[1]))
+
+filterFn_betweenInclusive.autoRemove = (val: any) => !val
+
+/**
+ * Filter function for checking if a number is within a given range.
+ */
+export const filterFn_inNumberRange: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValue: [number, number],
+) => {
+  const [min, max] = filterValue
+
+  const rowValue: number = row.getValue(columnId)
+  return rowValue >= min && rowValue <= max
+}
+
+filterFn_inNumberRange.resolveFilterValue = (val: [any, any]) => {
+  const [unsafeMin, unsafeMax] = val
+
+  const parsedMin =
+    typeof unsafeMin !== 'number' ? parseFloat(unsafeMin) : unsafeMin
+  const parsedMax =
+    typeof unsafeMax !== 'number' ? parseFloat(unsafeMax) : unsafeMax
+
+  let min =
+    unsafeMin === null || Number.isNaN(parsedMin) ? -Infinity : parsedMin
+  let max = unsafeMax === null || Number.isNaN(parsedMax) ? Infinity : parsedMax
+
+  if (min > max) {
+    const temp = min
+    min = max
+    max = temp
+  }
+
+  return [min, max] as const
+}
+
+filterFn_inNumberRange.autoRemove = (val: any) =>
+  testFalsy(val) || (testFalsy(val[0]) && testFalsy(val[1]))
+
+// Array filters
+
+/**
+ * Filter function for checking if an array has a given value.
+ */
+export const filterFn_arrHas: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValue: Array<unknown>,
+) => {
+  return filterValue.some((val) => row.getValue<unknown>(columnId) === val)
+}
+
+/**
+ * Filter function for checking if an array includes a given value.
+ */
+export const filterFn_arrIncludes: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValue: Array<unknown>,
+) => {
+  return filterValue.some((val) =>
+    (row.getValue<unknown>(columnId) as Array<unknown> | string).includes(
+      val as any,
+    ),
+  )
+}
+
+filterFn_arrIncludes.autoRemove = (val: any) => testFalsy(val) || !val?.length
+
+/**
+ * Filter function for checking if an array includes all of the given values.
+ */
+export const filterFn_arrIncludesAll: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValue: Array<unknown>,
+) => {
+  const value = row.getValue<Array<unknown>>(columnId)
+  if (!Array.isArray(value)) return false
+  return !filterValue.some((val) => !value.includes(val))
+}
+
+filterFn_arrIncludesAll.autoRemove = (val: any) =>
+  testFalsy(val) || !val?.length
+
+/**
+ * Filter function for checking if an array includes any of the given values.
+ */
+export const filterFn_arrIncludesSome: FilterFn<any, any> = <
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  row: Row<TFeatures, TData>,
+  columnId: string,
+  filterValue: Array<unknown>,
+) => {
+  const value = row.getValue<Array<unknown>>(columnId)
+  if (!Array.isArray(value)) return false
+  return filterValue.some((val) => value.includes(val))
+}
+
+filterFn_arrIncludesSome.autoRemove = (val: any) =>
+  testFalsy(val) || !val?.length
+
+// Export
+
+export const filterFns = {
+  arrIncludes: filterFn_arrIncludes,
+  arrIncludesAll: filterFn_arrIncludesAll,
+  arrHas: filterFn_arrHas,
+  arrIncludesSome: filterFn_arrIncludesSome,
+  between: filterFn_between,
+  betweenInclusive: filterFn_betweenInclusive,
+  equals: filterFn_equals,
+  equalsString: filterFn_equalsString,
+  inNumberRange: filterFn_inNumberRange,
+  includesString: filterFn_includesString,
+  includesStringSensitive: filterFn_includesStringSensitive,
+  weakEquals: filterFn_weakEquals,
+}
+
+export type BuiltInFilterFn = keyof typeof filterFns
+
+// Utils
+
+function testFalsy(val: any) {
+  return val === undefined || val === null || val === ''
+}