feat(table): add prop id

DevoInc · Nov 12, 2024 · c21395f · c21395f
1 parent 8451ad2
commit c21395f
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 10 deletions.
diff --git a/packages/table/src/core/Table/Table.tsx b/packages/table/src/core/Table/Table.tsx
@@ -32,6 +32,7 @@ export const Table: React.FC<TableProps> = ({
   highlightRowOnHoverFn,
   onCellDataChange,
   data,
+  id,
   resizableColumns = false,
   rowHeight = ROW_HEIGHT_MD,
 }) => {
@@ -46,6 +47,7 @@ export const Table: React.FC<TableProps> = ({
   return (
     <TableContext.Provider
       value={{
+        id,
         data,
         colDefs: mergedColDefs,
         showFilters,

diff --git a/packages/table/src/core/TableBody/TableBody.tsx b/packages/table/src/core/TableBody/TableBody.tsx
@@ -19,12 +19,13 @@ export const TableBody: React.FC<TableBodyProps> = ({
   width,
   height,
 }) => {
-  const { data } = React.useContext(TableContext);
+  const { data, id } = React.useContext(TableContext);
 
   return (
     <StyledTableBody
       $height={height}
       $width={width}
+      id={`${id}__body`}
     >
       {rowVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => (
         <Row

diff --git a/packages/table/src/core/TableHead/TableHead.tsx b/packages/table/src/core/TableHead/TableHead.tsx
@@ -20,11 +20,11 @@ export const TableHead: React.FC<TableHeadProps> = ({
   scrolled,
   width,
 }) => {
-  const { showFilters, density, onFilter, colDefs } =
+  const { showFilters, density, onFilter, colDefs, id } =
     React.useContext(TableContext);
 
   return (
-    <StyledTableHead $scrolled={scrolled} $width={width}>
+    <StyledTableHead $scrolled={scrolled} $width={width} id={`${id}__head`}>
       <StyledTableHeadRow $density={density}>
         {colDefs
           .map((colDef) => {

diff --git a/packages/table/src/core/TableWrapper/TableWrapper.tsx b/packages/table/src/core/TableWrapper/TableWrapper.tsx
@@ -17,7 +17,7 @@ import { StyledTableWrapper } from './StyledTableWrapper';
 
 export const TableWrapper: React.FC = () => {
   const theme = useTheme();
-  const { maxHeight, data, showFilters, density, rowDefs, colDefs } =
+  const { maxHeight, data, showFilters, density, rowDefs, colDefs, id } =
     React.useContext(TableContext);
 
   const ref = React.useRef<HTMLDivElement>();
@@ -55,6 +55,7 @@ export const TableWrapper: React.FC = () => {
         role={'grid'}
         aria-rowcount={data.length}
         aria-colcount={colDefs.length}
+        id={id}
       >
         <TableHead
           items={columnVirtualizer?.getVirtualItems() ?? []}

diff --git a/packages/table/src/declarations.ts b/packages/table/src/declarations.ts
@@ -187,6 +187,7 @@ export type TCellEditor = {
 };
 
 export interface ITable {
+  id: string;
   data: TData;
   // columns
   colDefs?: TColDef[];

diff --git a/packages/table/src/recipes/BasicTable.tsx b/packages/table/src/recipes/BasicTable.tsx
@@ -8,10 +8,12 @@ export const BasicTable: React.FC<TableProps> = ({
   rowPresets,
   highlightRowOnHoverFn,
   onCellDataChange,
+  id,
   ...props
 }) => (
   <Table
     {...props}
+    id={id}
     columnPresets={[
       ...(columnPresets ?? []),
       ...Object.values(listColumnPresets),

diff --git a/packages/table/stories/table/BasicTable.stories.tsx b/packages/table/stories/table/BasicTable.stories.tsx
@@ -38,6 +38,7 @@ const BasicCmp = ({ data, colDefs }) => {
     <Flex flexDirection="column" gap="cmp-md" height={'auto'}>
       <Flex.Item>
         <BasicTable
+          id={'basicTableStorie'}
           onSort={(colDef: TColDef) => {
             onSort(colDef.id);
           }}
@@ -52,12 +53,14 @@ const BasicCmp = ({ data, colDefs }) => {
           highlightRowOnHover={true}
           showFilters={true}
           onCellDataChange={({ colDef, value, rowIndex }) => {
-            setNewData(newData.map((data, index) => {
-              if(index === rowIndex) {
-                data[colDef.id] = value
-              }
-              return data
-            }))
+            setNewData(
+              newData.map((data, index) => {
+                if (index === rowIndex) {
+                  data[colDef.id] = value;
+                }
+                return data;
+              }),
+            );
           }}
         />
       </Flex.Item>