Adding generics to table

src/components/Dropdown/DropdownItem.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 
 export interface DropdownItemProps {
   children: ReactNode;
@@ -8,13 +8,13 @@ export interface DropdownItemProps {
   className?: string;
 }
 
-const DropdownItem: React.FC<DropdownItemProps> = ({
+const DropdownItem = ({
   children,
   onClick,
   isSelected = false,
   disabled = false,
   className = "",
-}) => {
+}: DropdownItemProps) => {
   const handleClick = () => {
     if (!disabled && onClick) {
       onClick();

src/components/animate/Animate.tsx

@@ -24,14 +24,14 @@ const MIN_DYNAMIC_DISTANCE = 100; // px - minimum distance from viewport edge fo
 const MAX_DYNAMIC_DISTANCE = 900; // px - maximum distance from viewport edge for animations
 const DISTANCE_SCALING_FACTOR = 80; // Factor for logarithmic scaling of dynamic distance
 
-interface AnimateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
+interface AnimateProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
   children: ReactNode;
   id: string;
   parentRef?: MutableRefObject<HTMLDivElement | null>;
-  tableRow?: TableRow;
+  tableRow?: TableRow<T>;
 }
-export const Animate = ({ children, id, parentRef, tableRow, ...props }: AnimateProps) => {
-  const { allowAnimations, isResizing, isScrolling, rowHeight } = useTableContext();
+export const Animate = <T,>({ children, id, parentRef, tableRow, ...props }: AnimateProps<T>) => {
+  const { allowAnimations, isResizing, isScrolling, rowHeight } = useTableContext<T>();
   const elementRef = useRef<HTMLDivElement>(null);
   const fromBoundsRef = useRef<DOMRect | null>(null);
   const previousScrollingState = usePrevious(isScrolling);

src/components/animate/animation-utils.ts

@@ -1,4 +1,3 @@
-import CellValue from "../../types/CellValue";
 import { AnimationConfig, FlipAnimationOptions, CustomAnimationOptions } from "./types";
 
 /**
@@ -102,8 +101,7 @@ const cleanupAnimation = (element: HTMLElement) => {
 const animateToFinalPosition = (
   element: HTMLElement,
   config: AnimationConfig,
-  options: FlipAnimationOptions = {},
-  id?: CellValue
+  options: FlipAnimationOptions = {}
 ): Promise<void> => {
   return new Promise((resolve) => {
     // Force a reflow to ensure the initial transform is applied

src/components/date-picker/DatePicker.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ReactNode } from "react";
+import { useState, ReactNode } from "react";
 import { useTableContext } from "../../context/TableContext";
 
 interface DatePickerProps {

src/components/filters/BooleanFilter.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import HeaderObject from "../../types/HeaderObject";
 import {
   FilterCondition,
@@ -13,19 +13,19 @@ import FilterSelect from "./shared/FilterSelect";
 import FilterSection from "./shared/FilterSection";
 import FilterActions from "./shared/FilterActions";
 
-interface BooleanFilterProps {
-  header: HeaderObject;
-  currentFilter?: FilterCondition;
-  onApplyFilter: (filter: FilterCondition) => void;
+interface BooleanFilterProps<T> {
+  header: HeaderObject<T>;
+  currentFilter?: FilterCondition<T>;
+  onApplyFilter: (filter: FilterCondition<T>) => void;
   onClearFilter: () => void;
 }
 
-const BooleanFilter: React.FC<BooleanFilterProps> = ({
+const BooleanFilter = <T,>({
   header,
   currentFilter,
   onApplyFilter,
   onClearFilter,
-}) => {
+}: BooleanFilterProps<T>) => {
   const [selectedOperator, setSelectedOperator] = useState<BooleanFilterOperator>(
     (currentFilter?.operator as BooleanFilterOperator) || "equals"
   );
@@ -47,7 +47,8 @@ const BooleanFilter: React.FC<BooleanFilterProps> = ({
   }, [currentFilter]);
 
   const handleApplyFilter = () => {
-    const filter: FilterCondition = {
+    if (!header.accessor) return;
+    const filter: FilterCondition<T> = {
       accessor: header.accessor,
       operator: selectedOperator,
     };

src/components/filters/DateFilter.tsx

@@ -15,19 +15,19 @@ import FilterActions from "./shared/FilterActions";
 import DatePicker from "../date-picker/DatePicker";
 import Dropdown from "../dropdown/Dropdown";
 
-interface DateFilterProps {
-  header: HeaderObject;
-  currentFilter?: FilterCondition;
-  onApplyFilter: (filter: FilterCondition) => void;
+interface DateFilterProps<T> {
+  header: HeaderObject<T>;
+  currentFilter?: FilterCondition<T>;
+  onApplyFilter: (filter: FilterCondition<T>) => void;
   onClearFilter: () => void;
 }
 
-const DateFilter: React.FC<DateFilterProps> = ({
+const DateFilter = <T,>({
   header,
   currentFilter,
   onApplyFilter,
   onClearFilter,
-}) => {
+}: DateFilterProps<T>) => {
   const [selectedOperator, setSelectedOperator] = useState<DateFilterOperator>(
     (currentFilter?.operator as DateFilterOperator) || "equals"
   );
@@ -59,7 +59,7 @@ const DateFilter: React.FC<DateFilterProps> = ({
   }, [currentFilter]);
 
   const handleApplyFilter = () => {
-    const filter: FilterCondition = {
+    const filter: FilterCondition<T> = {
       accessor: header.accessor,
       operator: selectedOperator,
     };

src/components/filters/EnumFilter.tsx

@@ -6,19 +6,19 @@ import FilterSection from "./shared/FilterSection";
 import FilterActions from "./shared/FilterActions";
 import Checkbox from "../Checkbox";
 
-interface EnumFilterProps {
-  header: HeaderObject;
-  currentFilter?: FilterCondition;
-  onApplyFilter: (filter: FilterCondition) => void;
+interface EnumFilterProps<T> {
+  header: HeaderObject<T>;
+  currentFilter?: FilterCondition<T>;
+  onApplyFilter: (filter: FilterCondition<T>) => void;
   onClearFilter: () => void;
 }
 
-const EnumFilter: React.FC<EnumFilterProps> = ({
+const EnumFilter = <T,>({
   header,
   currentFilter,
   onApplyFilter,
   onClearFilter,
-}) => {
+}: EnumFilterProps<T>) => {
   const enumOptions = useMemo(() => header.enumOptions || [], [header.enumOptions]);
 
   // Work with string values instead of full EnumOption objects
@@ -64,7 +64,7 @@ const EnumFilter: React.FC<EnumFilterProps> = ({
       return;
     }
 
-    const filter: FilterCondition = {
+    const filter: FilterCondition<T> = {
       accessor: header.accessor,
       operator: selectedOperator,
       values: selectedValues,

src/components/filters/FilterBar.tsx

@@ -1,9 +1,11 @@
-import React from "react";
 import { useTableContext } from "../../context/TableContext";
 import { FILTER_OPERATOR_LABELS, FilterCondition } from "../../types/FilterTypes";
 import { HeaderObject } from "../..";
 
-const getFilterDisplayText = (filter: FilterCondition, currentHeaders: HeaderObject[]) => {
+const getFilterDisplayText = <T,>(
+  filter: FilterCondition<T>,
+  currentHeaders: HeaderObject<T>[]
+) => {
   const header = currentHeaders.find((h) => h.accessor === filter.accessor);
   const columnName = header?.label || filter.accessor;
   const operatorLabel = FILTER_OPERATOR_LABELS[filter.operator];
@@ -25,10 +27,10 @@ const getFilterDisplayText = (filter: FilterCondition, currentHeaders: HeaderObj
   }
 
   if (filter.operator === "isEmpty" || filter.operator === "isNotEmpty") {
-    return `${columnName}: ${operatorLabel}`;
+    return `${String(columnName)}: ${operatorLabel}`;
   }
 
-  return `${columnName}: ${operatorLabel} ${valueText}`;
+  return `${String(columnName)}: ${operatorLabel} ${valueText}`;
 };
 
 const FilterBar = () => {

src/components/filters/FilterDropdown.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import HeaderObject from "../../types/HeaderObject";
 import { FilterCondition } from "../../types/FilterTypes";
 import StringFilter from "./StringFilter";
@@ -7,19 +6,19 @@ import BooleanFilter from "./BooleanFilter";
 import DateFilter from "./DateFilter";
 import EnumFilter from "./EnumFilter";
 
-interface FilterDropdownProps {
-  header: HeaderObject;
-  currentFilter?: FilterCondition;
-  onApplyFilter: (filter: FilterCondition) => void;
+interface FilterDropdownProps<T> {
+  header: HeaderObject<T>;
+  currentFilter?: FilterCondition<T>;
+  onApplyFilter: (filter: FilterCondition<T>) => void;
   onClearFilter: () => void;
 }
 
-const FilterDropdown: React.FC<FilterDropdownProps> = ({
+const FilterDropdown = <T,>({
   header,
   currentFilter,
   onApplyFilter,
   onClearFilter,
-}) => {
+}: FilterDropdownProps<T>) => {
   const renderFilterComponent = () => {
     switch (header.type) {
       case "number":

src/components/filters/NumberFilter.tsx

@@ -14,19 +14,19 @@ import FilterInput from "./shared/FilterInput";
 import FilterSection from "./shared/FilterSection";
 import FilterActions from "./shared/FilterActions";
 
-interface NumberFilterProps {
-  header: HeaderObject;
-  currentFilter?: FilterCondition;
-  onApplyFilter: (filter: FilterCondition) => void;
+interface NumberFilterProps<T> {
+  header: HeaderObject<T>;
+  currentFilter?: FilterCondition<T>;
+  onApplyFilter: (filter: FilterCondition<T>) => void;
   onClearFilter: () => void;
 }
 
-const NumberFilter: React.FC<NumberFilterProps> = ({
+const NumberFilter = <T,>({
   header,
   currentFilter,
   onApplyFilter,
   onClearFilter,
-}) => {
+}: NumberFilterProps<T>) => {
   const [selectedOperator, setSelectedOperator] = useState<NumberFilterOperator>(
     (currentFilter?.operator as NumberFilterOperator) || "equals"
   );
@@ -54,7 +54,7 @@ const NumberFilter: React.FC<NumberFilterProps> = ({
   }, [currentFilter]);
 
   const handleApplyFilter = () => {
-    const filter: FilterCondition = {
+    const filter: FilterCondition<T> = {
       accessor: header.accessor,
       operator: selectedOperator,
     };

src/components/filters/StringFilter.tsx

@@ -13,19 +13,19 @@ import FilterInput from "./shared/FilterInput";
 import FilterSection from "./shared/FilterSection";
 import FilterActions from "./shared/FilterActions";
 
-interface StringFilterProps {
-  header: HeaderObject;
-  currentFilter?: FilterCondition;
-  onApplyFilter: (filter: FilterCondition) => void;
+interface StringFilterProps<T> {
+  header: HeaderObject<T>;
+  currentFilter?: FilterCondition<T>;
+  onApplyFilter: (filter: FilterCondition<T>) => void;
   onClearFilter: () => void;
 }
 
-const StringFilter: React.FC<StringFilterProps> = ({
+const StringFilter = <T,>({
   header,
   currentFilter,
   onApplyFilter,
   onClearFilter,
-}) => {
+}: StringFilterProps<T>) => {
   const [selectedOperator, setSelectedOperator] = useState<StringFilterOperator>(
     (currentFilter?.operator as StringFilterOperator) || "contains"
   );
@@ -45,7 +45,7 @@ const StringFilter: React.FC<StringFilterProps> = ({
   }, [currentFilter]);
 
   const handleApplyFilter = () => {
-    const filter: FilterCondition = {
+    const filter: FilterCondition<T> = {
       accessor: header.accessor,
       operator: selectedOperator,
       ...(requiresSingleValue(selectedOperator) && { value: filterValue }),

src/components/filters/shared/CustomSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 import SelectIcon from "../../../icons/SelectIcon";
 import Dropdown from "../../dropdown/Dropdown";
 

src/components/filters/shared/FilterSection.tsx

@@ -1,11 +1,11 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 
 interface FilterSectionProps {
   children: ReactNode;
   className?: string;
 }
 
-const FilterSection: React.FC<FilterSectionProps> = ({ children, className = "" }) => {
+const FilterSection = ({ children, className = "" }: FilterSectionProps) => {
   return <div className={`st-filter-section ${className}`.trim()}>{children}</div>;
 };
 

src/components/filters/shared/FilterSelect.tsx

@@ -1,21 +1,20 @@
-import React from "react";
 import CustomSelect, { CustomSelectOption } from "./CustomSelect";
 
 interface FilterSelectProps {
-  value: string;
+  className?: string;
   onChange: (value: string) => void;
   options: CustomSelectOption[];
-  className?: string;
   placeholder?: string;
+  value: string;
 }
 
-const FilterSelect: React.FC<FilterSelectProps> = ({
-  value,
+const FilterSelect = ({
+  className = "",
   onChange,
   options,
-  className = "",
   placeholder,
-}) => {
+  value,
+}: FilterSelectProps) => {
   return (
     <CustomSelect
       value={value}

src/components/filters/shared/OperatorSelector.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { FILTER_OPERATOR_LABELS, FilterOperator } from "../../../types/FilterTypes";
 import CustomSelect, { CustomSelectOption } from "./CustomSelect";