diff --git a/src/App.tsx b/src/App.tsx index d3ef7d5..bc0712c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -216,9 +216,7 @@ export default function App() { state={trayState} {...trayTriggerProps} > -
- -
+ diff --git a/src/components/ResultsGrid.tsx b/src/components/ResultsGrid.tsx index d334cc0..79ccdc5 100644 --- a/src/components/ResultsGrid.tsx +++ b/src/components/ResultsGrid.tsx @@ -10,7 +10,7 @@ import { Cell, Column, Row, Table, TableHeader } from './Table'; const STATION_NAME = 'STATION_NAME'; type Result = Record; -async function getData(where: string, currentUser: User): Promise> { +async function getData(where: string, currentUser: User): Promise { if (where === '') { return []; } @@ -122,63 +122,66 @@ export default function ResultsGrid() { } return ( - - - - Event Date - - - Observers - - - Stream - - - Stream ID - - - Stream Reach Code - - - Lake - - - Lake ID - - - Lake Reach Code - - - Station Name - - - Species Codes - - - Equipment - - - Event ID - - - - {(row) => ( - - {new Date(row[config.fieldNames.EVENT_DATE] as number).toLocaleDateString()} - {row[config.fieldNames.OBSERVERS]} - {row[`${config.fieldNames.WaterName}_Stream`]} - {row[`${config.fieldNames.DWR_WaterID}_Stream`]} - {row[`${config.fieldNames.ReachCode}_Stream`]} - {row[`${config.fieldNames.WaterName}_Lake`]} - {row[`${config.fieldNames.DWR_WaterID}_Lake`]} - {row[`${config.fieldNames.ReachCode}_Lake`]} - {row[STATION_NAME]} - {row[config.fieldNames.SPECIES]} - {row[config.fieldNames.TYPES]} - {row[config.fieldNames.EVENT_ID]} - - )} - -
+ <> +
Results: {data?.length}
+ + + + Event Date + + + Observers + + + Stream + + + Stream ID + + + Stream Reach Code + + + Lake + + + Lake ID + + + Lake Reach Code + + + Station Name + + + Species Codes + + + Equipment + + + Event ID + + + + {(row) => ( + + {new Date(row[config.fieldNames.EVENT_DATE] as number).toLocaleDateString()} + {row[config.fieldNames.OBSERVERS]} + {row[`${config.fieldNames.WaterName}_Stream`]} + {row[`${config.fieldNames.DWR_WaterID}_Stream`]} + {row[`${config.fieldNames.ReachCode}_Stream`]} + {row[`${config.fieldNames.WaterName}_Lake`]} + {row[`${config.fieldNames.DWR_WaterID}_Lake`]} + {row[`${config.fieldNames.ReachCode}_Lake`]} + {row[STATION_NAME]} + {row[config.fieldNames.SPECIES]} + {row[config.fieldNames.TYPES]} + {row[config.fieldNames.EVENT_ID]} + + )} + +
+ ); } diff --git a/src/components/Table.tsx b/src/components/Table.tsx index a35ec14..b7ba74d 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -24,7 +24,7 @@ import { composeTailwindRenderProps, focusRing } from './utils.ts'; export function Table(props: TableProps) { return ( - + ); @@ -37,7 +37,7 @@ const columnStyles = tv({ const resizerStyles = tv({ extend: focusRing, - base: 'box-content h-5 w-px translate-x-[8px] cursor-col-resize rounded bg-gray-400 bg-clip-content px-[8px] py-1 -outline-offset-2 resizing:w-[2px] resizing:bg-blue-600 resizing:pl-[7px] dark:bg-zinc-500 forced-colors:bg-[ButtonBorder] forced-colors:resizing:bg-[Highlight]', + base: 'box-content h-5 w-px translate-x-[8px] cursor-col-resize bg-gray-400 bg-clip-content px-[8px] py-1 -outline-offset-2 resizing:w-[2px] resizing:bg-blue-600 resizing:pl-[7px] dark:bg-zinc-500 forced-colors:bg-[ButtonBorder] forced-colors:resizing:bg-[Highlight]', }); export function Column(props: ColumnProps) { @@ -83,7 +83,7 @@ export function TableHeader(props: TableHeaderProps) { {...props} className={composeTailwindRenderProps( props.className, - 'sticky top-0 z-10 rounded-t-lg border-b backdrop-blur-md supports-[-moz-appearance:none]:bg-gray-100 dark:border-b-zinc-300 dark:supports-[-moz-appearance:none]:bg-zinc-700 forced-colors:bg-[Canvas]', + 'sticky top-0 z-10 border-b backdrop-blur-md supports-[-moz-appearance:none]:bg-gray-100 dark:border-b-zinc-300 dark:supports-[-moz-appearance:none]:bg-zinc-700 forced-colors:bg-[Canvas]', )} > {/* Add extra columns for drag and drop and selection. */}