chore(Table): docs and housekeeping (#1722)

I see that we need some refactoring, while working on another larger PR.
dnbexperience · Nov 15, 2022 · 6c36c1f · 6c36c1f
1 parent 4d3e800
commit 6c36c1f
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 39 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/table/info.md
@@ -12,6 +12,13 @@ Tables do both serve as a way of navigation for screen readers and other asserti
 
 Use the documentation from [MDN – The Table element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) for more information on making semantic correct tables, including `scope`, `align`, `colSpan` and `rowSpan`.
 
+Here is a list of things you may follow along in order to ensure your coded tables still are accessible:
+
+- Keep a semantic correct structure.
+- Let tables align the column width, when possible.
+- Do not use CSS `display` property on any table element.
+- Do not overwrite styles in general, but rather get in touch with DNB UX.
+
 ## Table header components
 
 - `<Th.SortButton />` to be used for additional sorting functionality.

diff --git a/packages/dnb-eufemia/src/components/table/Table.tsx b/packages/dnb-eufemia/src/components/table/Table.tsx
@@ -111,7 +111,15 @@ const Table = (
   return (
     <Provider skeleton={Boolean(skeleton)}>
       <TableContext.Provider
-        value={{ trCountRef, rerenderAlias, forceRerender }}
+        value={{
+          trCountRef,
+          rerenderAlias,
+          forceRerender,
+          allProps: {
+            ...context.getTranslation(componentProps).Table,
+            ...allProps,
+          },
+        }}
       >
         <table
           className={classnames(

diff --git a/packages/dnb-eufemia/src/components/table/TableTd.tsx b/packages/dnb-eufemia/src/components/table/TableTd.tsx
@@ -9,16 +9,11 @@ export type TableTdProps = {
   children?: React.ReactNode
 }
 
-const Td = (
+export default function Td(
   componentProps: TableTdProps &
     React.TdHTMLAttributes<HTMLTableCellElement>
-) => {
-  const {
-    className,
-    children,
-
-    ...props
-  } = componentProps
+) {
+  const { className, children, ...props } = componentProps
 
   return (
     <td
@@ -30,5 +25,3 @@ const Td = (
     </td>
   )
 }
-
-export default Td
diff --git a/packages/dnb-eufemia/src/components/table/TableTr.tsx b/packages/dnb-eufemia/src/components/table/TableTr.tsx
@@ -17,46 +17,34 @@ export type TableTrProps = {
     | Array<React.ReactElement<TableTdProps>>
 }
 
-const Tr = (
+export default function Tr(
   componentProps: TableTrProps &
     React.TableHTMLAttributes<HTMLTableRowElement>
-) => {
+) {
   const {
     variant,
-    className,
     children,
-
+    className: _className,
     ...props
   } = componentProps
 
-  const tableContext = React.useContext(TableContext)
+  const { currentVariant } = useHandleTrVariant({ variant })
 
-  const { currentVariant, trRef, trParams } = useHandleTrLogic({
-    tableContext,
-    variant,
-  })
+  const className = classnames(
+    'dnb-table__tr',
+    currentVariant && `dnb-table__tr--${currentVariant}`,
+    _className
+  )
 
   return (
-    <tr
-      role="row"
-      className={classnames(
-        'dnb-table__tr',
-        currentVariant && `dnb-table__tr--${currentVariant}`,
-        className
-      )}
-      ref={trRef}
-      {...trParams}
-      {...props}
-    >
+    <tr role="row" className={className} {...props}>
       {children}
     </tr>
   )
 }
 
-export default Tr
-
-function useHandleTrLogic({ tableContext, variant }) {
-  const trRef = React.useRef(null)
+function useHandleTrVariant({ variant }) {
+  const tableContext = React.useContext(TableContext)
 
   /**
    * Handle odd/even
@@ -112,11 +100,7 @@ function useHandleTrLogic({ tableContext, variant }) {
     currentVariant = count % 2 ? 'odd' : 'even'
   }
 
-  const trParams = {}
-
   return {
-    trRef,
     currentVariant,
-    trParams,
   }
 }