[@kadena/react-ui] Classnames to table components

kadena-community · Jan 24, 2024 · 5267f19 · 5267f19
1 parent 6a5275c
commit 5267f19
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 11 deletions.
diff --git a/packages/libs/react-ui/src/components/Table/TBody.tsx b/packages/libs/react-ui/src/components/Table/TBody.tsx
@@ -5,11 +5,12 @@ import type { CompoundType } from './types';
 
 export interface ITBodyProps {
   children?: CompoundType<typeof Tr>;
+  className?: string;
 }
 
-export const TBody: FC<ITBodyProps> = ({ children }) => {
+export const TBody: FC<ITBodyProps> = ({ children, className }) => {
   return (
-    <tbody>
+    <tbody className={className}>
       {React.Children.map(children, (child) => {
         if (
           !React.isValidElement(child) ||

diff --git a/packages/libs/react-ui/src/components/Table/THead.tsx b/packages/libs/react-ui/src/components/Table/THead.tsx
@@ -5,11 +5,12 @@ import type { CompoundType } from './types';
 
 export interface ITHeadProps {
   children?: CompoundType<typeof Tr>;
+  className?: string;
 }
 
-export const THead: FC<ITHeadProps> = ({ children }) => {
+export const THead: FC<ITHeadProps> = ({ children, className }) => {
   return (
-    <thead>
+    <thead className={className}>
       {React.Children.map(children, (child) => {
         if (
           !React.isValidElement(child) ||

diff --git a/packages/libs/react-ui/src/components/Table/Table.tsx b/packages/libs/react-ui/src/components/Table/Table.tsx
@@ -11,15 +11,22 @@ import type { CompoundType } from './types';
 export interface ITableProps extends Pick<Sprinkles, 'wordBreak'> {
   children?: CompoundType<typeof TBody> | CompoundType<typeof THead>;
   striped?: boolean;
+  className?: string;
 }
 
-export const Table: FC<ITableProps> = ({ children, striped, wordBreak }) => {
+export const Table: FC<ITableProps> = ({
+  children,
+  striped,
+  wordBreak,
+  className,
+}) => {
   return (
     <table
       className={classNames(
         tableClass,
         { stripedClass: striped },
         sprinkles({ wordBreak }),
+        className,
       )}
     >
       {React.Children.map(children, (child) => {

diff --git a/packages/libs/react-ui/src/components/Table/Td.tsx b/packages/libs/react-ui/src/components/Table/Td.tsx
@@ -1,11 +1,13 @@
+import classNames from 'classnames';
 import type { FC } from 'react';
 import React from 'react';
 import { tdClass } from './Table.css';
 
 export interface ITdProps {
   children?: React.ReactNode;
+  className?: string;
 }
 
-export const Td: FC<ITdProps> = ({ children }) => {
-  return <td className={tdClass}>{children}</td>;
+export const Td: FC<ITdProps> = ({ children, className }) => {
+  return <td className={classNames(tdClass, className)}>{children}</td>;
 };
diff --git a/packages/libs/react-ui/src/components/Table/Th.tsx b/packages/libs/react-ui/src/components/Table/Th.tsx
@@ -8,12 +8,23 @@ import { thClass } from './Table.css';
 export interface IThProps
   extends Pick<Sprinkles, 'width' | 'minWidth' | 'maxWidth'> {
   children?: React.ReactNode;
+  className?: string;
 }
 
-export const Th: FC<IThProps> = ({ children, width, minWidth, maxWidth }) => {
+export const Th: FC<IThProps> = ({
+  children,
+  width,
+  minWidth,
+  maxWidth,
+  className,
+}) => {
   return (
     <th
-      className={classNames(thClass, sprinkles({ width, minWidth, maxWidth }))}
+      className={classNames(
+        thClass,
+        sprinkles({ width, minWidth, maxWidth }),
+        className,
+      )}
     >
       {children}
     </th>

diff --git a/packages/libs/react-ui/src/components/Table/Tr.tsx b/packages/libs/react-ui/src/components/Table/Tr.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import type { FC } from 'react';
 import React from 'react';
 import { Link, SystemIcon } from '..';
@@ -11,11 +12,12 @@ export interface ITrProps {
   children?: CompoundType<typeof Td> | CompoundType<typeof Th>;
   url?: string;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
 }
 
-export const Tr: FC<ITrProps> = ({ children, url, onClick }) => {
+export const Tr: FC<ITrProps> = ({ children, url, onClick, className }) => {
   return (
-    <tr className={trClass}>
+    <tr className={classNames(trClass, className)}>
       {React.Children.map(children, (child) => {
         if (
           !React.isValidElement(child) ||