random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-19 08:51:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Resizable columns on the document table

Browse Source
This commit is contained in:
Laurent Nguyen
2024-02-27 14:21:26 +01:00
parent ed95f0e922
commit 2165d968b9
1 changed files with 89 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { Table, TableBody, TableCell, TableCellLayout, TableColumnDefinition, TableHeader, TableHeaderCell, TableRow, TableRowId, TableSelectionCell, createTableColumn, useArrowNavigationGroup, useTableFeatures, useTableSelection } from '@fluentui/react-components'; import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger, Table, TableBody, TableCell, TableCellLayout, TableColumnDefinition, TableColumnSizingOptions, TableHeader, TableHeaderCell, TableRow, TableRowId, TableSelectionCell, createTableColumn, useArrowNavigationGroup, useTableColumnSizing_unstable, useTableFeatures, useTableSelection } from '@fluentui/react-components';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
export type DocumentsTableComponentItem = { export type DocumentsTableComponentItem = {
@@ -12,9 +12,6 @@ export interface IDocumentsTableComponentProps {
style?: React.CSSProperties; style?: React.CSSProperties;
} }
export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
items, onSelectedItem, style,
}: IDocumentsTableComponentProps) => {
const columns: TableColumnDefinition<DocumentsTableComponentItem>[] = [ const columns: TableColumnDefinition<DocumentsTableComponentItem>[] = [
createTableColumn<DocumentsTableComponentItem>({ createTableColumn<DocumentsTableComponentItem>({
columnId: "id", columnId: "id",
@@ -46,16 +43,29 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
}), }),
]; ];
// const [columnSizingOptions] = React.useState<TableColumnSizingOptions>({ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
// id: { items, onSelectedItem, style,
// idealWidth: 300, }: IDocumentsTableComponentProps) => {
// minWidth: 150, const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>({
// }, id: {
// type: { idealWidth: 300,
// minWidth: 110, minWidth: 273,
// defaultWidth: 250, },
// }, type: {
// }); minWidth: 110,
defaultWidth: 120,
},
});
const onColumnResize = React.useCallback((_, { columnId, width }) => {
setColumnSizingOptions((state) => ({
...state,
[columnId]: {
...state[columnId],
idealWidth: width,
},
}));
}, []);
const [selectedRows, setSelectedRows] = React.useState<Set<TableRowId>>( const [selectedRows, setSelectedRows] = React.useState<Set<TableRowId>>(
() => new Set<TableRowId>([0]) () => new Set<TableRowId>([0])
@@ -63,8 +73,8 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
const { const {
getRows, getRows,
// columnSizing_unstable, columnSizing_unstable: columnSizing,
// tableRef, tableRef,
selection: { selection: {
allRowsSelected, allRowsSelected,
someRowsSelected, someRowsSelected,
@@ -78,7 +88,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
items, items,
}, },
[ [
// useTableColumnSizing_unstable({ columnSizingOptions }), useTableColumnSizing_unstable({ columnSizingOptions, onColumnResize }),
useTableSelection({ useTableSelection({
selectionMode: "multiselect", selectionMode: "multiselect",
selectedItems: selectedRows, selectedItems: selectedRows,
@@ -126,10 +136,10 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
const tableProps = { const tableProps = {
"aria-label": "Filtered documents table", "aria-label": "Filtered documents table",
role: "grid", role: "grid",
...columnSizing.getTableProps(),
...keyboardNavAttr, ...keyboardNavAttr,
// ...columnSizing_unstable.getTableProps(),
size: "extra-small", size: "extra-small",
// ref: tableRef, ref: tableRef,
...style, ...style,
}; };
@@ -145,8 +155,29 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
onKeyDown={toggleAllKeydown} onKeyDown={toggleAllKeydown}
checkboxIndicator={{ "aria-label": "Select all rows " }} checkboxIndicator={{ "aria-label": "Select all rows " }}
/> />
<TableHeaderCell>id</TableHeaderCell> {columns.map((column, index) => (
<TableHeaderCell>/type</TableHeaderCell> <Menu openOnContext key={column.columnId}>
<MenuTrigger>
<TableHeaderCell
key={column.columnId}
{...columnSizing.getTableHeaderCellProps(column.columnId)}
>
{column.renderHeaderCell()}
</TableHeaderCell>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem
onClick={columnSizing.enableKeyboardMode(
column.columnId
)}
>
Keyboard Column Resizing
</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
))}
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -164,12 +195,16 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
onClick={onClick} onClick={onClick}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
/> />
<TableCell onClick={(/* e */) => setSelectedRows(new Set<TableRowId>([index]))} onKeyDown={onKeyDown}> {columns.map((column) => (
<TableCellLayout>{item.id}</TableCellLayout> <TableCell
</TableCell> key={column.columnId}
<TableCell> onClick={(/* e */) => setSelectedRows(new Set<TableRowId>([index]))}
<TableCellLayout>{item.type}</TableCellLayout> onKeyDown={onKeyDown}
{...columnSizing.getTableCellProps(column.columnId)}
>
{column.renderCell(item)}
</TableCell> </TableCell>
))}
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>