@tcn/ui-table 2.3.4 → 2.3.6

package/src/components/cells/header_cell.tsx

@@ -2,22 +2,17 @@ import React, { useCallback } from 'react';
 
 import { Box, HStack } from '@tcn/ui/stacks';
 
-import { TwoClassSortDownIcon } from '@tcn/icons/two_class_sort_down_icon.js';
-import { TwoClassSortFilledIcon } from '@tcn/icons/two_class_sort_filled_icon.js';
-import { TwoClassSortUpIcon } from '@tcn/icons/two_class_sort_up_icon.js';
-import { Button } from '@tcn/ui/actions';
 import cellStyles from './cell.module.css';
+import { SortControl, type SortControlProps } from './sort_control.js';
+import { TH } from '@tcn/ui/layouts';
 
-export type HeaderCellProps = {
+export interface HeaderCellProps extends SortControlProps {
   heading: React.ReactNode;
   index: number;
   sticky?: 'start' | 'end';
   onResize?: (width: number) => void;
   width?: number;
-  sortMode?: 'none' | 'asc' | 'desc';
-  onSortModeChange?: () => void;
-  canSort?: boolean;
-};
+}
 
 export function HeaderCell({
   heading,
@@ -38,40 +33,36 @@ export function HeaderCell({
   );
 
   return (
-    <th
+    <TH
       className={cellStyles['table-cell']}
       data-stick-to={sticky}
       style={{ width: `${width}px`, zIndex }}
     >
       <Box
-        padding="4px 6px"
+        padding="0px 8px" // FIXME: should be on theme ideally.
         overflow="hidden"
-        minWidth="20px"
+        minWidth="24px"
         enableResizeOnEnd
         onWidthResize={handleResize}
         style={{ width: `${width}px`, minWidth: '20px' }}
         onClick={e => e.stopPropagation()}
-        height="30px"
       >
         <HStack>
-          <Box className="ellipsis" style={{ alignItems: 'center', display: 'flex' }}>
+          <Box
+            minWidth="24px"
+            className="ellipsis"
+            style={{ alignItems: 'center', display: 'flex' }}
+          >
             {heading}
           </Box>
-          <Box width="auto" height="auto">
-            {canSort && (
-              <Button onClick={() => onSortModeChange?.()} hierarchy="tertiary">
-                {sortMode === 'asc' ? (
-                  <TwoClassSortDownIcon />
-                ) : sortMode === 'desc' ? (
-                  <TwoClassSortUpIcon />
-                ) : (
-                  <TwoClassSortFilledIcon />
-                )}
-              </Button>
-            )}
-          </Box>
+
+          <SortControl
+            canSort={canSort}
+            onSortModeChange={onSortModeChange}
+            sortMode={sortMode}
+          />
         </HStack>
       </Box>
-    </th>
+    </TH>
   );
 }

package/src/components/cells/sort_control.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+
+import { Box } from '@tcn/ui/stacks';
+
+import { TwoClassSortDownIcon } from '@tcn/icons/two_class_sort_down_icon.js';
+import { TwoClassSortFilledIcon } from '@tcn/icons/two_class_sort_filled_icon.js';
+import { TwoClassSortUpIcon } from '@tcn/icons/two_class_sort_up_icon.js';
+import { Button } from '@tcn/ui/actions';
+
+export type SortMode = 'asc' | 'desc' | 'none';
+
+export interface SortControlProps {
+  canSort?: boolean;
+  onSortModeChange?: () => void;
+  sortMode?: SortMode;
+}
+
+const sortIconMap: Record<SortMode, React.ComponentType<any>> = {
+  asc: TwoClassSortDownIcon,
+  desc: TwoClassSortUpIcon,
+  none: TwoClassSortFilledIcon,
+};
+
+export const SortControl = ({
+  canSort,
+  onSortModeChange,
+  sortMode = 'none',
+}: SortControlProps) => {
+  const handleSortModeChange = useCallback(() => {
+    onSortModeChange?.();
+  }, [onSortModeChange]);
+
+  if (!canSort) return null;
+
+  const SortIcon = sortIconMap[sortMode];
+
+  return (
+    <Box width="auto" height="auto">
+      <Button utility onClick={handleSortModeChange} hierarchy="tertiary">
+        <SortIcon />
+      </Button>
+    </Box>
+  );
+};

package/src/components/cells/sticky_row_data_cell.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import cellStyles from './cell.module.css';
+import { TD } from '@tcn/ui/layouts';
 
 export type StickyRowDataCellProps = {
   content: React.ReactNode;
@@ -15,7 +16,7 @@ export function StickyRowDataCell({
   top,
 }: StickyRowDataCellProps) {
   return (
-    <td
+    <TD
       className={cellStyles['sticky-row-table-cell']}
       data-stick-to={sticky}
       style={{
@@ -26,6 +27,6 @@ export function StickyRowDataCell({
       }}
     >
       <div>{content}</div>
-    </td>
+    </TD>
   );
 }

package/src/components/cells/sticky_row_fill_cell.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import cellStyles from './cell.module.css';
+import { TD } from '@tcn/ui/layouts';
 
 export type StyckyRowFillCellProps = {
   top?: number;
@@ -7,10 +8,10 @@ export type StyckyRowFillCellProps = {
 
 export function StickyRowFillCell({ top }: StyckyRowFillCellProps) {
   return (
-    <td
+    <TD
       className={cellStyles['sticky-row-table-cell']}
       data-stick-to="start"
       style={{ top: `${top}px` }}
-    ></td>
+    ></TD>
   );
 }

package/src/components/table/table.module.css

@@ -1,38 +1,36 @@
-.table-body-wrapper {
-  box-shadow: var(--table-box-shadow, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5));
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
-    "Open Sans", "Helvetica Neue", sans-serif;
-  color: #333;
-}
-
 .table-body {
   border-spacing: 0;
   width: auto;
   min-width: 100%;
   height: auto;
   min-height: 100%;
-  font-size: 12px;
   table-layout: fixed;
-  background-color: #ebebeb;
-}
-
-:global(.dark-mode) .table-body {
-  background-color: #333;
-  color: rgba(255, 255, 255, 0.9);
-}
-
-td {
-  text-align: start;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  background-color: inherit;
+  display: table;
 }
 
-.table-body tr {
-  font-size: 12px;
-}
+/* FIXME: These styles should be handled at the theme level
+   but tcn ui does not handle resizing or sticky logic. */
+/* Reset padding for header - due to resize logic  */
+.table-body thead {
+  th,
+  td {
+    padding: 0;
+  }
+}
+
+.table-body thead tr,
+.table-body tbody tr {
+  th[data-stick-to="start"],
+  td[data-stick-to="start"] {
+    border-inline-end: 1px solid #ccc;
+  }
+  th[data-stick-to="end"],
+  td[data-stick-to="end"] {
+    border-inline-start: 1px solid #ccc;
+  }
+}
+/* ^^^^ */
+/* This needs a better solution w/ theming system */
 
 .table-body tr[data-clickable="true"] {
   cursor: pointer;
@@ -61,109 +59,15 @@ td {
   z-index: 2;
 }
 
-.table-body th {
-  --accent-color: #0077aa;
-  --accent-surface-light: color-mix(in srgb, var(--accent-color) 8%, white);
-  background-color: var(--accent-surface-light);
-  color: #000; /* Black text color */
-  font-weight: normal;
-  text-align: start;
-}
-
 .table-body th > div {
-  border-inline-start: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
   display: flex;
   align-items: center;
 }
 
-.table-body th:first-child > div {
-  border-inline-start: none;
-}
-
-.table-body th:last-child > div {
-  border-inline: 1px solid #ccc;
-}
-
-:global(.dark-mode) .table-body th:last-child {
-  border-inline: 1px solid #202020;
-}
-
-.table-body td:last-child > div {
-  border-inline: 1px solid #ccc;
-}
-
-:global(.dark-mode) .table-body td:last-child > div {
-  border-inline: 1px solid #202020;
-}
-
-:global(.dark-mode) .table-body th {
-  color: rgba(255, 255, 255, 0.9);
-  border-bottom: 1px solid #202020;
-  border-inline-start: 1px solid #202020;
-  background-color: #333;
-}
-
 .table-body td > div {
   height: 100%;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #e0e0e0; /* Lighter border for cells */
-}
-
-:global(.dark-mode) .table-body td > div {
-  border-bottom: 1px solid #202020; /* Lighter border for cells */
-}
-
-.table-body tr:nth-child(odd) {
-  background-color: #f1f1f1;
-}
-
-.table-body tr:nth-child(even) {
-  background-color: rgba(255, 255, 255);
-}
-
-:global(.dark-mode) .table-body tr:nth-child(odd) {
-  background-color: #3b3b3b; /* Zebra striping for rows */
-}
-
-:global(.dark-mode) .table-body tr:nth-child(even) {
-  background-color: #2e2e2e;
-}
-
-/* Hover effect for rows */
-.table-body tr:hover {
-  background-color: #dedede;
-}
-
-:global(.dark-mode) .table-body tr:hover {
-  background-color: rgba(30, 30, 30, 1);
-}
-
-/* Styling for the table's header row to mimic macOS window styling */
-.table-body thead {
-  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
-}
-
-/* Footer styling, if applicable */
-.table-body tfoot td {
-  background-color: #f0f0f0;
-  font-weight: bold;
-}
-
-.table-body tr:global(.fill) {
-  height: auto;
-}
-
-.table-body tr td:global(.fill) {
-  width: auto;
-  min-width: none;
-  background-color: inherit;
-}
-
-.table-body tr th:global(.fill) {
-  width: auto;
-  background-color: inherit;
 }
 
 .table-body tfoot {
@@ -171,103 +75,11 @@ td {
   bottom: 0px;
 }
 
-.table-body tr[data-selected="true"] {
-  background-color: var(--accent-color, #549aff);
-  color: #fff;
-}
-
-:global(.dark-mode) .table-body tr[data-selected="true"] {
-  background-color: var(--accent-color, #549aff);
-  color: #fff;
-}
-
 .table-body td,
 .table-body th {
-  /* padding: 4px 0; */
-  max-height: 30px;
-  height: 30px;
-  font-size: 12px;
   vertical-align: middle;
 }
 
-.table-body td:first-child > div {
-  padding-inline-start: var(--surface-inset, 6px);
-}
-
-.table-body td:last-child > div {
-  padding-inline-end: var(--surface-inset, 6px);
-}
-
-:global(.small-text) .table-body td,
-:global(.small-text) .table-body th {
-  /* padding: 2px 4px; */
-  max-height: 20px;
-  height: 20px;
-  font-size: 10px;
-}
-
-:global(.medium-small-text) .table-body td,
-:global(.medium-small-text) .table-body th {
-  /* padding: 4px 6px; */
-  max-height: 22px;
-  height: 22px;
-  font-size: 12px;
-}
-
-:global(.medium-text) .table-body td,
-:global(.medium-text) .table-body th {
-  /* padding: 6px 8px; */
-  max-height: 24px;
-  height: 24px;
-  font-size: 14px;
-}
-
-:global(.medium-large-text) .table-body td,
-:global(.medium-large-text) .table-body th {
-  /* padding: 8px 10px; */
-  max-height: 26px;
-  height: 26px;
-  font-size: 16px;
-}
-
-:global(.large-text) .table-body td,
-:global(.large-text) .table-body th {
-  /* padding: 10px 12px; */
-  height: 28px;
-  max-height: 28px;
-  font-size: 18px;
-}
-
-.table-body th {
-  padding: 0 !important;
-}
-
-.table-body tr th:global(.spacer) {
-  background-color: #f1f1f1;
-}
-
-:global(.dark-mode) .table-body tr th:global(.spacer) {
-  background-color: #333;
-}
-
-.table-body tr th:global(.fill) {
-  background-color: #f1f1f1;
-}
-
-:global(.dark-mode) .table-body tr th:global(.fill) {
-  background-color: #333;
-}
-
-/* sticky stuff */
-
-.table-body tr[data-sticky-row] td {
-  background-color: rgb(204, 204, 204);
-}
-
-:global(.dark-mode) .table-body tr[data-sticky-row] td {
-  background-color: rgb(47, 47, 47);
-}
-
 .table-body[data-is-clickable="true"] td {
   cursor: pointer;
 }

package/src/components/table/table.tsx

@@ -12,7 +12,15 @@ import { StickyRowFillCell } from '../cells/sticky_row_fill_cell.js';
 import styles from './table.module.css';
 import { TableColumn, TableColumnProps } from './table_column.js';
 import { TablePresenter } from './table_presenter.js';
-
+import {
+  TTable as PrimitiveTable,
+  TBody,
+  TD,
+  TFoot,
+  TH,
+  THead,
+  TR,
+} from '@tcn/ui/layouts';
 export type TableProps<T> = BoxProps & {
   dataSource: DataSource<T>;
   children: ReactElement<TableColumnProps<T>>[];
@@ -21,7 +29,9 @@ export type TableProps<T> = BoxProps & {
   stickyItems?: T[];
 };
 
-const HEADER_ROW_HEIGHT = 30;
+// FIXME: Ideally should be on theme - even if its a required theme variable.
+const HEADER_ROW_HEIGHT = 32;
+const BODY_ROW_HEIGHT = 24;
 
 // @TODO: Props for loading and error states
 
@@ -84,13 +94,13 @@ export function Table<T>({
       style={{ overflow: 'auto' }}
       {...props}
     >
-      <table
+      <PrimitiveTable
         className={styles['table-body']}
         data-is-clickable={isClickable}
         style={{ width, height }}
       >
-        <thead>
-          <tr>
+        <THead>
+          <TR>
             {columnInfo.map((column, index) => (
               <HeaderCell
                 key={`h-${index}`}
@@ -104,12 +114,12 @@ export function Table<T>({
                 canSort={column.canSort}
               />
             ))}
-            <th key="fill" className="fill"></th>
-          </tr>
-        </thead>
-        <tbody>
+            <TH key="fill" fill className="fill"></TH>
+          </TR>
+        </THead>
+        <TBody>
           {stickyItems?.map((item, index) => (
-            <tr key={`sticky-${index}`} data-sticky-row>
+            <TR key={`sticky-${index}`} data-sticky-row>
               {columnInfo.map((col, colIndex) => {
                 const fieldName = col.fieldName;
                 const render = col.render;
@@ -124,18 +134,19 @@ export function Table<T>({
                     content={content}
                     sticky={col.sticky}
                     width={col.width}
-                    top={HEADER_ROW_HEIGHT * (index + 1)}
+                    top={HEADER_ROW_HEIGHT + BODY_ROW_HEIGHT * index}
                   />
                 );
               })}
-              <StickyRowFillCell top={HEADER_ROW_HEIGHT * (index + 1) + 1} />
-            </tr>
+              <StickyRowFillCell top={HEADER_ROW_HEIGHT + BODY_ROW_HEIGHT * index} />
+            </TR>
           ))}
           {itemsStatus === Status.SUCCESS &&
             rows.map((item, rowIndex) => (
-              <tr
+              <TR
                 key={`${page}-${rowIndex}`}
                 data-selected={isRowHighlighted?.(item, rowIndex)}
+                isSelected={isRowHighlighted?.(item, rowIndex)}
                 onClick={() => onRowClick?.(item, rowIndex)}
               >
                 {columnInfo.map((col, colIndex) => {
@@ -155,16 +166,16 @@ export function Table<T>({
                     />
                   );
                 })}
-                <td key="fill" className="fill"></td>
-              </tr>
+                <TD key="fill" fill className="fill"></TD>
+              </TR>
             ))}
           {itemsStatus === Status.PENDING && 'Loading...'}
           {itemsStatus === Status.ERROR && 'Error loading data'}
-          <tr key="fill" className="fill"></tr>
-        </tbody>
+          <TR key="fill" className="fill"></TR>
+        </TBody>
         {showFooter && (
-          <tfoot>
-            <tr>
+          <TFoot>
+            <TR>
               {columnInfo.map((col, colIndex) => (
                 <FooterCell
                   key={`footer-${colIndex}`}
@@ -173,11 +184,11 @@ export function Table<T>({
                   width={col.width}
                 />
               ))}
-              <td key="footer-fill" className="fill"></td>
-            </tr>
-          </tfoot>
+              <TD key="footer-fill" fill className="fill"></TD>
+            </TR>
+          </TFoot>
         )}
-      </table>
+      </PrimitiveTable>
     </Box>
   );
 }

package/src/components/table_filter_panel/field_filters/string_field_filter.tsx

@@ -60,6 +60,7 @@ export function StringFieldFilter({ fieldName, label, operators }: FieldFilterPr
         <Button
           onClick={() => presenter.setValue(null)}
           hierarchy="tertiary"
+          utility
           disabled={value == null}
         >
           <CrossCircleIcon />

package/src/components/table_pager.tsx

@@ -28,10 +28,20 @@ export function TablePager<T>({ dataSource, ...props }: TablePagerProps<T>) {
         <BodyText>Page:</BodyText>
         <BodyText className={styles['page-count']}>{pageIndex + 1}</BodyText>
       </HStack>
-      <Button onClick={() => dataSource.previousPage()} disabled={pageIndex === 0}>
+      <Button
+        utility
+        hierarchy="tertiary"
+        onClick={() => dataSource.previousPage()}
+        disabled={pageIndex === 0}
+      >
         <ChevronLeftIcon flipOnRtl />
       </Button>
-      <Button onClick={() => dataSource.nextPage()} disabled={!hasNextPage}>
+      <Button
+        utility
+        hierarchy="tertiary"
+        onClick={() => dataSource.nextPage()}
+        disabled={!hasNextPage}
+      >
         <ChevronRightIcon flipOnRtl />
       </Button>
     </HStack>