feat(ui): extra styling variant of the table component (#2715)

kadena-community · Dec 6, 2024 · dbd9076 · dbd9076
1 parent 1f46bee
commit dbd9076
Show file tree

Hide file tree

Showing 20 changed files with 511 additions and 184 deletions.
diff --git a/.changeset/nervous-turtles-heal.md b/.changeset/nervous-turtles-heal.md
@@ -0,0 +1,5 @@
+---
+'@kadena/kode-ui': minor
+---
+
+add an extra styling variant to the table component
diff --git a/packages/apps/rwa-demo/src/app/(app)/assets/page.tsx b/packages/apps/rwa-demo/src/app/(app)/assets/page.tsx
@@ -10,6 +10,7 @@ const Assets = () => {
   return (
     <>
       <CompactTable
+        variant="open"
         fields={[
           {
             key: 'uuid',

diff --git a/packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx b/packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx
@@ -58,6 +58,7 @@ export const AgentsList: FC = () => {
           />
           <SectionCardBody>
             <CompactTable
+              variant="open"
               fields={[
                 {
                   label: 'Name',

diff --git a/packages/apps/rwa-demo/src/components/InvestorList/InvestorList.tsx b/packages/apps/rwa-demo/src/components/InvestorList/InvestorList.tsx
@@ -53,6 +53,7 @@ export const InvestorList: FC = () => {
 
           <SectionCardBody>
             <CompactTable
+              variant="open"
               fields={[
                 {
                   label: 'Name',

diff --git a/packages/libs/kode-ui/src/components/Table/Body.tsx b/packages/libs/kode-ui/src/components/Table/Body.tsx
@@ -10,19 +10,22 @@ import {
   useTableCell,
   useTableRow,
 } from 'react-aria';
-import { tableDataCell, tableRow } from './Table.css';
+import type { ITableProps } from './Table';
+import { spacerClass, tableDataCell, tableRow } from './Table.css';
 
 export interface ITableRowProps<T> {
   item: GridNode<T>;
   state: TableState<T> | TreeGridState<T>;
   children: ReactNode;
   selectionMode: TableProps<T>['selectionMode'];
+  variant: ITableProps<HTMLTableElement>['variant'];
 }
 
 export function TableRow<T extends object>({
   item,
   children,
   state,
+  variant,
 }: ITableRowProps<T>) {
   const ref = useRef(null);
   const { rowProps, isSelected } = useTableRow(
@@ -36,27 +39,32 @@ export function TableRow<T extends object>({
   const { isHovered, hoverProps } = useHover({ isDisabled: false });
 
   return (
-    <tr
-      className={tableRow}
-      {...mergeProps(rowProps, focusProps, hoverProps)}
-      data-focused={isFocusVisible || undefined}
-      data-hovered={isHovered || undefined}
-      data-selected={isSelected || undefined}
-      ref={ref}
-    >
-      {children}
-    </tr>
+    <>
+      {variant === 'open' && <tr className={spacerClass} />}
+      <tr
+        className={tableRow}
+        {...mergeProps(rowProps, focusProps, hoverProps)}
+        data-focused={isFocusVisible || undefined}
+        data-hovered={isHovered || undefined}
+        data-selected={isSelected || undefined}
+        ref={ref}
+      >
+        {children}
+      </tr>
+    </>
   );
 }
 
 interface ITableCellProps<T> {
   cell: GridNode<T>;
   state: TableState<T>;
+  variant: ITableProps<HTMLTableElement>['variant'];
 }
 
 export function TableCell<T extends object>({
   cell,
   state,
+  variant = 'default',
 }: ITableCellProps<T>) {
   const ref = useRef(null);
   const { gridCellProps } = useTableCell({ node: cell }, state, ref);
@@ -65,7 +73,7 @@ export function TableCell<T extends object>({
   return (
     <td
       {...mergeProps(gridCellProps, focusProps)}
-      className={tableDataCell}
+      className={tableDataCell({ variant })}
       data-focused={isFocusVisible || undefined}
       ref={ref}
     >

diff --git a/packages/libs/kode-ui/src/components/Table/Header.tsx b/packages/libs/kode-ui/src/components/Table/Header.tsx
@@ -8,39 +8,33 @@ import {
   useTableColumnHeader,
   useTableHeaderRow,
 } from 'react-aria';
+import type { ITableProps } from '..';
 import { Stack } from '..';
 
 import { MonoExpandLess, MonoExpandMore } from '@kadena/kode-icons/system';
-import classNames from 'classnames';
-import {
-  columnHeader,
-  defaultHeader,
-  headerBase,
-  subtleHeader,
-} from './Table.css';
+import { columnHeader, headerBase } from './Table.css';
 
 interface ITableHeaderRowProps<T> {
   item: GridNode<T>;
   state: TableState<T>;
   children: ReactNode;
   isSubtle?: boolean;
+  variant: ITableProps<HTMLTableElement>['variant'];
 }
 
 export function TableHeaderRow<T extends object>({
   item,
   state,
   children,
   isSubtle = false,
+  variant = 'default',
 }: ITableHeaderRowProps<T>) {
   const ref = useRef(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
 
   return (
     <tr
-      className={classNames(headerBase, {
-        [subtleHeader]: isSubtle,
-        [defaultHeader]: !isSubtle,
-      })}
+      className={headerBase({ variant, subtleHeader: isSubtle })}
       {...rowProps}
       ref={ref}
     >
@@ -65,11 +59,13 @@ interface ITableColumnHeaderProps<T> {
   column: GridNode<T>;
   state: TableState<T>;
   isSubtle?: boolean;
+  variant: ITableProps<HTMLTableElement>['variant'];
 }
 
 export function TableColumnHeader<T extends object>({
   column,
   state,
+  variant,
 }: ITableColumnHeaderProps<T>) {
   const ref = useRef(null);
   const { columnHeaderProps } = useTableColumnHeader(
@@ -87,7 +83,7 @@ export function TableColumnHeader<T extends object>({
     <th
       {...mergeProps(columnHeaderProps, focusProps)}
       colSpan={column.colspan}
-      className={columnHeader}
+      className={columnHeader({ variant })}
       style={{
         width: getWidthStyle(column.props.width),
         minWidth: getWidthStyle(column.props.minWidth),