random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-02-01 13:46:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add keyboard support to select table row

Browse Source
This commit is contained in:
Laurent Nguyen 2024-04-23 15:14:33 +02:00
parent a0ade247e9
commit 2cc771315d
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
View File

@ -22,7 +22,7 @@ import {
useTableFeatures, useTableFeatures,
useTableSelection, useTableSelection,
} from "@fluentui/react-components"; } from "@fluentui/react-components";
import React, { useEffect, useMemo } from "react"; import React, { useCallback, useEffect, useMemo } from "react";
import { FixedSizeList as List, ListChildComponentProps } from "react-window"; import { FixedSizeList as List, ListChildComponentProps } from "react-window";
export type DocumentsTableComponentItem = { export type DocumentsTableComponentItem = {
@ -121,6 +121,8 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
[columnHeaders], [columnHeaders],
); );
const onIdClicked = useCallback((index: number) => onSelectedRowsChange(new Set([index])), [onSelectedRowsChange]);
const RenderRow = ({ index, style, data }: ReactWindowRenderFnProps) => { const RenderRow = ({ index, style, data }: ReactWindowRenderFnProps) => {
const { item, selected, appearance, onClick, onKeyDown } = data[index]; const { item, selected, appearance, onClick, onKeyDown } = data[index];
return ( return (
@ -135,8 +137,9 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
<TableCell <TableCell
key={column.columnId} key={column.columnId}
onClick={(/* e */) => onSelectedRowsChange(new Set<TableRowId>([index]))} onClick={(/* e */) => onSelectedRowsChange(new Set<TableRowId>([index]))}
onKeyDown={onKeyDown} onKeyDown={() => onIdClicked(index)}
{...columnSizing.getTableCellProps(column.columnId)} {...columnSizing.getTableCellProps(column.columnId)}
tabIndex={column.columnId === "id" ? 0 : -1}
> >
{column.renderCell(item)} {column.renderCell(item)}
</TableCell> </TableCell>