feat: modify component table

packages/app/src/ui/table/styles.ts

@@ -26,11 +26,12 @@ export const StyledTableCell = styled.td<
   const width = proportion ? `${proportion * 100}%` : 'auto';
   return {
     width,
-    height: '54px',
-    lineHeight: '54px',
+    height: '52px',
+    lineHeight: '52px',
     padding: '0 30px',
     boxSizing: 'border-box',
     textAlign: align,
+    verticalAlign: 'middle',
     ...(ellipsis ? textEllipsis(1) : {}),
     overflowWrap: 'break-word',
   };

packages/app/src/ui/table/table-body.tsx

@@ -1,8 +1,11 @@
-import { PropsWithChildren } from 'react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
 import { StyledTableBody } from '@/ui/table/styles';
 
-export const TableBody = ({ children }: PropsWithChildren<{}>) => {
-  return <StyledTableBody>{children}</StyledTableBody>;
+export const TableBody = ({
+  children,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>) => {
+  return <StyledTableBody {...props}>{children}</StyledTableBody>;
 };
 
 export default TableBody;

packages/app/src/ui/table/table-cell.tsx

@@ -1,11 +1,14 @@
-import { PropsWithChildren, useLayoutEffect } from 'react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
 import { TableCellProps } from './interface';
 import { StyledTableCell } from './styles';
 
 export const TableCell = ({
   children,
+  ellipsis,
   ...props
-}: PropsWithChildren<TableCellProps>) => {
+}: PropsWithChildren<
+  TableCellProps & HTMLAttributes<HTMLTableCellElement>
+>) => {
   return <StyledTableCell {...props}>{children}</StyledTableCell>;
 };
 

packages/app/src/ui/table/table-head.tsx

@@ -1,8 +1,11 @@
-import { PropsWithChildren } from 'react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
 import { StyledTableHead } from './styles';
 
-export const TableHead = ({ children }: PropsWithChildren<{}>) => {
-  return <StyledTableHead>{children}</StyledTableHead>;
+export const TableHead = ({
+  children,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>) => {
+  return <StyledTableHead {...props}>{children}</StyledTableHead>;
 };
 
 export default TableHead;

packages/app/src/ui/table/table-row.tsx

@@ -1,8 +1,11 @@
-import { PropsWithChildren } from 'react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
 import { StyledTableRow } from './styles';
 
-export const TableRow = ({ children }: PropsWithChildren<{}>) => {
-  return <StyledTableRow>{children}</StyledTableRow>;
+export const TableRow = ({
+  children,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLTableRowElement>>) => {
+  return <StyledTableRow {...props}>{children}</StyledTableRow>;
 };
 
 export default TableRow;

packages/app/src/ui/table/table.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, Children, ReactNode } from 'react';
+import { PropsWithChildren, Children, ReactNode, HTMLAttributes } from 'react';
 import { StyledTable } from './styles';
 
 const childrenHasEllipsis = (children: ReactNode | ReactNode[]): boolean => {
@@ -14,10 +14,17 @@ const childrenHasEllipsis = (children: ReactNode | ReactNode[]): boolean => {
   });
 };
 
-export const Table = ({ children }: PropsWithChildren<{}>) => {
+export const Table = ({
+  children,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLTableElement>>) => {
   const tableLayout = childrenHasEllipsis(children) ? 'fixed' : 'auto';
 
-  return <StyledTable tableLayout={tableLayout}>{children}</StyledTable>;
+  return (
+    <StyledTable tableLayout={tableLayout} {...props}>
+      {children}
+    </StyledTable>
+  );
 };
 
 export default Table;