fix: Allow providing ReactNodes as Table header text

- Allow providing `ReactNode`s as Table header text, e.g. so icons can be used as header text.
gravitational · Nov 6, 2024 · b2961ae · b2961ae
1 parent 313acfa
commit b2961ae
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/web/packages/design/src/DataTable/Cells.tsx b/web/packages/design/src/DataTable/Cells.tsx
@@ -16,8 +16,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { TdHTMLAttributes } from 'react';
-
 import { Theme } from 'design/theme';
 
 import Label from '../Label';
@@ -26,7 +24,8 @@ import * as Icons from '../Icon';
 
 import { displayDate } from '../datetime';
 
-import {
+import type { ReactNode, TdHTMLAttributes } from 'react';
+import type {
   ServersideProps,
   SortDir,
   TableColumn,
@@ -58,6 +57,7 @@ export function SortHeaderCell<T>({
         <a
           onClick={handleServersideClick}
           style={{ display: 'flex', alignItems: 'center' }}
+          aria-label={column.ariaLabel || undefined}
         >
           {text}
           <SortIndicator
@@ -162,7 +162,7 @@ export const ClickableLabelCell = ({
 type SortHeaderCellProps<T> = {
   column: TableColumn<T>;
   serversideProps?: ServersideProps;
-  text: string;
+  text: string | ReactNode;
   dir?: SortDir;
   onClick: () => void;
 };
diff --git a/web/packages/design/src/DataTable/types.ts b/web/packages/design/src/DataTable/types.ts
@@ -20,6 +20,8 @@ import { MatchCallback } from 'design/utils/match';
 
 import { Pagination } from './useTable';
 
+import type { ReactNode } from 'react';
+
 export type TableProps<T> = {
   data: T[];
   columns: TableColumn<T>[];
@@ -91,7 +93,8 @@ export type TableProps<T> = {
 };
 
 type TableColumnBase<T> = {
-  headerText?: string;
+  headerText?: string | ReactNode;
+  ariaLabel?: string;
   render?: (row: T) => JSX.Element;
   isSortable?: boolean;
   onSort?: (a: T, b: T) => number;

diff --git a/web/packages/teleport/src/components/hooks/useUrlFiltering/encodeUrlQueryParams.ts b/web/packages/teleport/src/components/hooks/useUrlFiltering/encodeUrlQueryParams.ts
@@ -33,7 +33,7 @@ export function encodeUrlQueryParams({
   sort,
   kinds,
   isAdvancedSearch = false,
-  pinnedOnly = false,
+  pinnedOnly,
 }: EncodeUrlQueryParamsProps) {
   const urlParams = new URLSearchParams();