\n \n \n

\n );\n}\n\n// Type-safe filter for string columns\nfunction StringColumnFilter({\n column,\n}: {\n column: Column;\n}) {\n const filterValue = column.getFilterValue() as string | undefined;\n\n const handleChange = useCallback(\n (value: string) => {\n column.setFilterValue(value ?? undefined);\n },\n [column]\n );\n\n return (\n \n );\n}\n\n// Type-safe filter for enum(-ish) column\nfunction EnumColumnFilter({\n column,\n table,\n}: {\n column: Column;\n table: Table;\n}) {\n const filterValue = column.getFilterValue() as string | undefined;\n\n // Get unique values\n const uniqueValues = useMemo(() => {\n const values = table\n .getPreFilteredRowModel()\n .flatRows.map((row) => {\n const value = row.getValue(column.id);\n return typeof value === \"string\" ? value : \"\";\n })\n .filter(Boolean);\n\n return [...new Set(values)].sort();\n }, [column.id, table]);\n\n return (\n column.setFilterValue(e.target.value || undefined)}\n >\n \n {uniqueValues.map((value) => (\n \n ))}\n \n );\n}\n\n// Type-safe filter for scratched column\nfunction ScratchedColumnFilter({\n column,\n}: {\n column: Column;\n}) {\n // Ensure we're consistently working with numbers for the filter value\n const filterValue = column.getFilterValue() as number | undefined;\n\n const scratchedOptions = [\n { value: 0, label: scratchedToString(0) },\n { value: 1, label: scratchedToString(1) },\n { value: 2, label: scratchedToString(2) },\n { value: 3, label: scratchedToString(3) },\n { value: 4, label: scratchedToString(4) },\n ];\n\n return (\n {\n const value = e.target.value;\n column.setFilterValue(value === \"\" ? undefined : Number(value));\n }}\n >\n \n {scratchedOptions.map((option) => (\n \n ))}\n \n );\n}\n\n// Main filter component that delegates to specific filter components based on column type\nfunction Filter({\n column,\n table,\n}: {\n column: Column;\n table: Table;\n}): React.ReactElement {\n const firstValue = table\n .getPreFilteredRowModel()\n .flatRows[0]?.getValue(column.id);\n\n // Determine column type and use appropriate filter\n if ([\"country_name\", \"gender\", \"group_label\"].includes(column.id)) {\n return (\n }\n table={table}\n />\n );\n } else if (column.id === \"scratched\") {\n return (\n }\n />\n );\n } else if (typeof firstValue === \"number\") {\n return (\n }\n />\n );\n } else {\n // Default to string filter for all other columns\n return (\n } />\n );\n }\n}\n\nconst DataTable: React.FC<{\n data: RiderTidy[];\n}> = ({ data }) => {\n const [globalFilter, setGlobalFilter] = useState(\"\");\n const [columnFilters, setColumnFilters] = useState([]);\n const [grouping, setGrouping] = useState([]);\n const columnHelper = createColumnHelper();\n\n // Memoize columns to prevent unnecessary re-renders\n const columns = useMemo(\n () => [\n columnHelper.accessor(\"position\", {\n header: \"Position\",\n cell: (info) => info.getValue() ?? undefined,\n sortDescFirst: false,\n // Simplified sorting function that's more stable\n sortingFn: (rowA, rowB, columnId) => {\n const valueA = rowA.original[columnId];\n const valueB = rowB.original[columnId];\n\n // Handle null values\n if (valueA == null && valueB == null) return 0;\n if (valueA == null) return 1; // nulls last\n if (valueB == null) return -1; // nulls last\n\n // Simple numeric comparison\n return valueA - valueB;\n },\n enableGrouping: false,\n }),\n columnHelper.accessor(\"cap\", {\n header: \"Cap 🧢\",\n cell: (info) => info.getValue(),\n enableGrouping: false,\n }),\n columnHelper.accessor(\"name\", {\n header: \"Name\",\n cell: (info) => (\n

\n {info.row.original.theme.color && (\n

\n )}\n \n \n {info.getValue()}\n \n \n \n ),\n enableGrouping: false, // Too many unique values to group by\n }),\n columnHelper.accessor(\"group.label\", {\n header: \"Category\",\n cell: (info) => info.getValue(),\n enableGrouping: true,\n }),\n columnHelper.accessor(\"gender\", {\n header: \"Gender\",\n cell: (info) => info.getValue(),\n enableGrouping: true,\n filterFn: \"equalsString\",\n }),\n columnHelper.accessor(\"country.name\", {\n header: \"Country\",\n cell: (info) =>\n [info.row.original.country.emoji, info.getValue()]\n .filter(isDefined)\n .join(\" \"),\n enableGrouping: true,\n }),\n columnHelper.accessor(\"lastControlPoint\", {\n header: \"Last CP\",\n cell: (info) => info.getValue(),\n enableGrouping: true,\n }),\n columnHelper.accessor(\"scratched\", {\n header: \"Scratched?\",\n cell: (info) => {\n const value = info.getValue();\n return scratchedToString(value);\n },\n enableGrouping: true,\n filterFn: (row, columnId, filterValue) => {\n if (filterValue === undefined) {\n return true;\n }\n const value = row.getValue(columnId);\n return value === filterValue;\n },\n }),\n columnHelper.accessor(\"lastReportMins\", {\n header: \"Last Tracker Ping (mins)\",\n cell: (info) => info.getValue(),\n enableGrouping: false,\n }),\n ],\n []\n );\n\n // Memoize the table instance to prevent unnecessary re-renders\n const table = useReactTable({\n data,\n columns,\n state: {\n globalFilter,\n columnFilters,\n grouping,\n expanded: true, // Start with all groups expanded\n },\n onGlobalFilterChange: setGlobalFilter,\n onColumnFiltersChange: setColumnFilters,\n onGroupingChange: setGrouping,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getGroupedRowModel: getGroupedRowModel(),\n getExpandedRowModel: getExpandedRowModel(),\n enableGrouping: true,\n // Define how grouped rows should be displayed\n groupedColumnMode: \"reorder\", // Move grouped columns to the start\n });\n\n return (\n

\n \n Group By:\n \n {\n const value = e.target.value;\n setGrouping(value ? [value] : []);\n }}\n >\n \n {table\n .getAllLeafColumns()\n .filter((column) => column.getCanGroup())\n .map((column) => (\n \n ))}\n \n

\n {grouping.length > 0 && (\n

\n \n Then By:\n \n {\n const value = e.target.value;\n setGrouping((prev) => {\n if (!value) return [prev[0]];\n return [prev[0], value];\n });\n }}\n >\n \n {table\n .getAllLeafColumns()\n .filter(\n (column) =>\n column.getCanGroup() && column.id !== grouping[0]\n )\n .map((column) => (\n \n ))}\n \n

\n )}\n

\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => (\n \n \n {flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n {{\n asc: \" 🔼\",\n desc: \" 🔽\",\n }[header.column.getIsSorted() as string] ?? null}\n \n {header.column.getCanFilter() ? (\n

\n \n

\n ) : null}\n \n ))}\n \n ))}\n \n \n {table.getRowModel().rows.map((row) => {\n return (\n \n {row.getVisibleCells().map((cell) => {\n return (\n \n {cell.getIsGrouped() ? (\n

\n \n {row.getIsExpanded() ? \"👇\" : \"👉\"}\n \n \n {cell.column.columnDef.header?.toString()}:{\" \"}\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n \n \n ({row.subRows.length})\n \n

\n ) : cell.getIsPlaceholder() ||\n row.getIsGrouped() ? null : ( // Use null for placeholder cells and aggregated cells in grouped rows\n flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )\n )}\n \n );\n })}\n \n );\n })}\n \n

\n Showing {table.getFilteredRowModel().rows.length} of {data.length}{\" \"}\n records\n

\n );\n};\n\nconst App: React.FC = () => {\n const [riderData, setRiderData] = useState([]);\n const [loading, setLoading] = useState(false);\n\n const fetchRiderData = useCallback(async () => {\n setLoading(true);\n\n try {\n const response = await fetch(`/api/tcrno11/data`);\n\n // TODO: zod-ify this\n const json: ApiResponse = await response.json();\n\n if (json.result !== \"ok\") {\n console.error(\"Error fetching data:\", json.message);\n return;\n }\n\n setRiderData(json.data);\n } catch (error) {\n console.error(\"Error fetching data:\", error);\n } finally {\n setLoading(false);\n }\n }, []);\n\n useEffect(() => {\n fetchRiderData();\n }, [fetchRiderData]);\n\n return (\n

FMC++

\n {loading ? (\n

\n ) : (\n \n )}\n

\n );\n};\n\nconst root = document.getElementById(\"root\");\ncreateRoot(root).render();\n","deleted","label",[167,149],"web","permalink","https://www.val.town/x/notjosh/followmychallenge-tcrno11-web/code/web/app.tsx","extension","actionData","errors"]