fix: fix table row id issue

affects: @medly-components/core
medly · Jan 3, 2025 · 05a1c0c · 05a1c0c
1 parent d96f192
commit 05a1c0c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 51 deletions.
diff --git a/packages/core/src/components/Table/Body/Body.tsx b/packages/core/src/components/Table/Body/Body.tsx
@@ -68,12 +68,11 @@ const Body: FC<TableBodyProps> = memo(props => {
                 </NoResultRow>
             )}
             {data.map((row, index) => {
-                const identifier = (groupBy ? row[groupBy] : row[rowIdentifier]) || index,
-                    uniqueId = isNaN(Number(identifier)) ? index : identifier;
+                const uniqueId = (groupBy ? row[groupBy] : row[rowIdentifier]) || index;
                 return groupBy ? (
                     <GroupedRow
                         id={uniqueId}
-                        key={identifier}
+                        key={uniqueId}
                         titleRowData={row}
                         setUniqueIds={setUniqueIds}
                         selectedTitleRowIds={selectedRowIds}
@@ -83,7 +82,8 @@ const Body: FC<TableBodyProps> = memo(props => {
                 ) : (
                     <Row
                         id={uniqueId}
-                        key={identifier}
+                        tabIndex={index}
+                        key={uniqueId}
                         data={row}
                         onRowNavigated={onRowNavigated}
                         selectedRowIds={selectedRowIds}

diff --git a/packages/core/src/components/Table/Body/Row/Row.tsx b/packages/core/src/components/Table/Body/Row/Row.tsx
@@ -15,6 +15,7 @@ export const Row: FC<RowProps> = memo(props => {
     const [isRowHovered, setIsRowHovered] = useState(false),
         {
             id,
+            tabIndex,
             data,
             isNavigated = false,
             isRowExpandedFromKeyboard,
@@ -136,7 +137,7 @@ export const Row: FC<RowProps> = memo(props => {
             <Styled.Row
                 {...restProps}
                 ref={ref}
-                tabIndex={Number(id)}
+                tabIndex={tabIndex}
                 disabled={isRowClickDisabled}
                 onClick={handleRowClick}
                 isSelected={isRowSelected}

diff --git a/packages/core/src/components/Table/Body/__snapshots__/Body.test.tsx.snap b/packages/core/src/components/Table/Body/__snapshots__/Body.test.tsx.snap
@@ -113,36 +113,6 @@ exports[`Row should render tbody properly with default props 1`] = `
   color: #13181D;
 }
 
-.c7 {
-  display: grid;
-  position: relative;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  outline: none;
-  cursor: inherit;
-}
-
-.c7.c7:hover {
-  z-index: 2;
-}
-
-.c7:nth-child(odd),
-.c7:nth-child(odd) > * {
-  background-color: #D7E3F6;
-  color: #13181D;
-}
-
-.c7:nth-child(even),
-.c7:nth-child(even) > * {
-  background-color: #D7E3F6;
-  color: #13181D;
-}
-
 <div>
   <tbody
     class="c0"
@@ -219,7 +189,7 @@ exports[`Row should render tbody properly with default props 1`] = `
       </td>
     </tr>
     <tr
-      class="c7"
+      class="c1"
       style="grid-template-columns: undefined minmax(0px, 0fr) undefined undefined undefined;"
       tabindex="1"
     >

diff --git a/packages/core/src/components/Table/__snapshots__/Table.test.tsx.snap b/packages/core/src/components/Table/__snapshots__/Table.test.tsx.snap
@@ -1007,7 +1007,7 @@ exports[`Table component pagination should call onPageChange prop on click on an
       <tr
         class="c15"
         style="grid-template-columns: minmax(100px, 2fr) minmax(200px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);"
-        tabindex="1"
+        tabindex="0"
       >
         <td
           class="c16"
@@ -1078,7 +1078,7 @@ exports[`Table component pagination should call onPageChange prop on click on an
       <tr
         class="c15"
         style="grid-template-columns: minmax(100px, 2fr) minmax(200px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);"
-        tabindex="2"
+        tabindex="1"
       >
         <td
           class="c16"
@@ -1149,7 +1149,7 @@ exports[`Table component pagination should call onPageChange prop on click on an
       <tr
         class="c15"
         style="grid-template-columns: minmax(100px, 2fr) minmax(200px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);"
-        tabindex="3"
+        tabindex="2"
       >
         <td
           class="c16"
@@ -1220,7 +1220,7 @@ exports[`Table component pagination should call onPageChange prop on click on an
       <tr
         class="c15"
         style="grid-template-columns: minmax(100px, 2fr) minmax(200px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);"
-        tabindex="4"
+        tabindex="3"
       >
         <td
           class="c16"
@@ -1291,7 +1291,7 @@ exports[`Table component pagination should call onPageChange prop on click on an
       <tr
         class="c15"
         style="grid-template-columns: minmax(100px, 2fr) minmax(200px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);"
-        tabindex="5"
+        tabindex="4"
       >
         <td
           class="c16"
@@ -1362,7 +1362,7 @@ exports[`Table component pagination should call onPageChange prop on click on an
       <tr
         class="c15"
         style="grid-template-columns: minmax(100px, 2fr) minmax(200px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);"
-        tabindex="6"
+        tabindex="5"
       >
         <td
           class="c16"
@@ -1433,7 +1433,7 @@ exports[`Table component pagination should call onPageChange prop on click on an
       <tr
         class="c15"
         style="grid-template-columns: minmax(100px, 2fr) minmax(200px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);"
-        tabindex="7"
+        tabindex="6"
       >
         <td
           class="c16"
@@ -2346,7 +2346,7 @@ exports[`Table component should render HiddenDiv containing HTML tags as plain t
       <tr
         class="c15"
         style="grid-template-columns: minmax(100px, 2fr) minmax(200px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);"
-        tabindex="8"
+        tabindex="0"
       >
         <td
           class="c16"
@@ -3107,7 +3107,7 @@ exports[`Table component should render properly 1`] = `
       <tr
         class="c15"
         style="grid-template-columns: minmax(100px, 2fr) minmax(200px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);"
-        tabindex="1"
+        tabindex="0"
       >
         <td
           class="c16"
@@ -3178,7 +3178,7 @@ exports[`Table component should render properly 1`] = `
       <tr
         class="c15"
         style="grid-template-columns: minmax(100px, 2fr) minmax(200px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);"
-        tabindex="2"
+        tabindex="1"
       >
         <td
           class="c16"
@@ -3249,7 +3249,7 @@ exports[`Table component should render properly 1`] = `
       <tr
         class="c15"
         style="grid-template-columns: minmax(100px, 2fr) minmax(200px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);"
-        tabindex="3"
+        tabindex="2"
       >
         <td
           class="c16"
@@ -3320,7 +3320,7 @@ exports[`Table component should render properly 1`] = `
       <tr
         class="c15"
         style="grid-template-columns: minmax(100px, 2fr) minmax(200px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);"
-        tabindex="4"
+        tabindex="3"
       >
         <td
           class="c16"
@@ -3391,7 +3391,7 @@ exports[`Table component should render properly 1`] = `
       <tr
         class="c15"
         style="grid-template-columns: minmax(100px, 2fr) minmax(200px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);"
-        tabindex="5"
+        tabindex="4"
       >
         <td
           class="c16"
@@ -3462,7 +3462,7 @@ exports[`Table component should render properly 1`] = `
       <tr
         class="c15"
         style="grid-template-columns: minmax(100px, 2fr) minmax(200px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);"
-        tabindex="6"
+        tabindex="5"
       >
         <td
           class="c16"
@@ -3533,7 +3533,7 @@ exports[`Table component should render properly 1`] = `
       <tr
         class="c15"
         style="grid-template-columns: minmax(100px, 2fr) minmax(200px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);"
-        tabindex="7"
+        tabindex="6"
       >
         <td
           class="c16"