diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx index a9c5437b9..a483ec3e4 100644 --- a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx @@ -121,6 +121,7 @@ export type DataTableColumn = { predefined?: boolean; }[]; inversed?: boolean; + sortable?: boolean; }; export interface TableRowRenderContext { diff --git a/desktop/flipper-plugin/src/ui/data-table/TableHead.tsx b/desktop/flipper-plugin/src/ui/data-table/TableHead.tsx index 27347a8b7..aa646a361 100644 --- a/desktop/flipper-plugin/src/ui/data-table/TableHead.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/TableHead.tsx @@ -13,7 +13,7 @@ import { Percentage, Width, } from '../../utils/widthUtils'; -import {memo, useRef} from 'react'; +import {HTMLAttributes, memo, useRef} from 'react'; import {Interactive, InteractiveProps} from '../Interactive'; import styled from '@emotion/styled'; import React from 'react'; @@ -174,25 +174,26 @@ function TableHeadColumn({ }); }; + let divProps: HTMLAttributes = {}; + if (column.sortable) { + divProps = { + onClick: (e) => { + e.stopPropagation(); + const newDirection = + sorted === undefined ? 'asc' : sorted === 'asc' ? 'desc' : undefined; + dispatch({ + type: 'sortColumn', + column: column.key, + direction: newDirection, + }); + }, + role: 'button', + tabIndex: 0, + }; + } let children = ( -
{ - e.stopPropagation(); - const newDirection = - sorted === undefined - ? 'asc' - : sorted === 'asc' - ? 'desc' - : undefined; - dispatch({ - type: 'sortColumn', - column: column.key, - direction: newDirection, - }); - }} - role="button" - tabIndex={0}> +
{column.title === undefined ? ( toFirstUpper(column.key) @@ -201,12 +202,18 @@ function TableHeadColumn({ ) : ( column.title )} - - dispatch({type: 'sortColumn', column: column.key, direction: dir}) - } - /> + {column.sortable ? ( + + dispatch({ + type: 'sortColumn', + column: column.key, + direction: dir, + }) + } + /> + ) : null}