From 312d898b54f92f839d0b4cfb9c99ab0feadd8306 Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Fri, 9 Dec 2022 01:36:33 +0800
Subject: [PATCH] feat: modify component table

---
 packages/app/src/ui/table/styles.ts      |  5 +++--
 packages/app/src/ui/table/table-body.tsx |  9 ++++++---
 packages/app/src/ui/table/table-cell.tsx |  7 +++++--
 packages/app/src/ui/table/table-head.tsx |  9 ++++++---
 packages/app/src/ui/table/table-row.tsx  |  9 ++++++---
 packages/app/src/ui/table/table.tsx      | 13 ++++++++++---
 6 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/packages/app/src/ui/table/styles.ts b/packages/app/src/ui/table/styles.ts
index 5c14236737..c954e1b424 100644
--- a/packages/app/src/ui/table/styles.ts
+++ b/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',
   };
diff --git a/packages/app/src/ui/table/table-body.tsx b/packages/app/src/ui/table/table-body.tsx
index 2954415bf7..8780f48b2f 100644
--- a/packages/app/src/ui/table/table-body.tsx
+++ b/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;
diff --git a/packages/app/src/ui/table/table-cell.tsx b/packages/app/src/ui/table/table-cell.tsx
index 5dfe025a5c..3514d2fb23 100644
--- a/packages/app/src/ui/table/table-cell.tsx
+++ b/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>;
 };
 
diff --git a/packages/app/src/ui/table/table-head.tsx b/packages/app/src/ui/table/table-head.tsx
index 33e95ce6e3..d1b993af30 100644
--- a/packages/app/src/ui/table/table-head.tsx
+++ b/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;
diff --git a/packages/app/src/ui/table/table-row.tsx b/packages/app/src/ui/table/table-row.tsx
index c421f81868..b60ba1bf13 100644
--- a/packages/app/src/ui/table/table-row.tsx
+++ b/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;
diff --git a/packages/app/src/ui/table/table.tsx b/packages/app/src/ui/table/table.tsx
index 47bea8362e..fba647619d 100644
--- a/packages/app/src/ui/table/table.tsx
+++ b/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;