diff --git a/src/components/app/data-table.tsx b/src/components/app/data-table.tsx index e86dcbb..7306007 100644 --- a/src/components/app/data-table.tsx +++ b/src/components/app/data-table.tsx @@ -39,6 +39,7 @@ import { useAtom, useSetAtom } from 'jotai'; import { columnStateAtom, dropdownFnAtom, filterStateAtom, rowCountAtom, tickerAtom } from '../../state/atom'; import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'; import { HistoricalChart } from './historical-chart'; +import { useEventListener } from 'usehooks-ts'; // table columns const columnHelper = createColumnHelper(); @@ -301,7 +302,8 @@ export const DataTable: FC = ({ data }) => { const resetPageIndex = useCallback(() => { listRef.current?.scrollToIndex({ - index: 0 + index: 0, + offset: -100 }); }, []); @@ -327,6 +329,30 @@ export const DataTable: FC = ({ data }) => { const gridTemplateColumnsStyle: CSSProperties = { gridTemplateColumns: `repeat(${numColumns}, auto)` }; const gridColumnStyle: CSSProperties = { gridColumn: `1 / ${numColumns + 1}` }; + useEventListener('keydown', (event) => { + const availableRowsLength = table.getRowModel().rows.length; + if (ticker.length > 0) { + switch (event.key) { + case 'ArrowUp': { + const activeRowIndex = table.getRowModel().rows.findIndex((item) => item.original.ticker === ticker); + if (activeRowIndex > 0) { + const previousTicker = table.getRowModel().rows[activeRowIndex - 1].original.ticker; + setTicker(previousTicker); + } + break; + } + case 'ArrowDown': { + const activeRowIndex = table.getRowModel().rows.findIndex((item) => item.original.ticker === ticker); + if (activeRowIndex < availableRowsLength - 1) { + const nextTicker = table.getRowModel().rows[activeRowIndex + 1].original.ticker; + setTicker(nextTicker); + } + break; + } + } + } + }); + return ( <> @@ -359,6 +385,7 @@ export const DataTable: FC = ({ data }) => { 0}> diff --git a/src/components/app/search-box.tsx b/src/components/app/search-box.tsx index 0c4525f..e86477f 100644 --- a/src/components/app/search-box.tsx +++ b/src/components/app/search-box.tsx @@ -99,6 +99,11 @@ export const SearchBox = () => { inputRef.current?.select(); }, 50); } + if (event.key === 'ArrowUp' || event.key === 'ArrowDown') { + setTimeout(() => { + inputRef.current?.select(); + }, 50); + } setTimeout(() => { inputRef.current?.focus(); }, 0);