Pass table meta.

Author: novykh

src/components/tableV2/core/base-table.js

@@ -259,17 +259,16 @@ Table.Cell = forwardRef(
   (
     {
       align = "left",
-      cellStyles = {},
       children,
       maxWidth,
       minWidth,
       onClick,
-      pinnedStyles = {},
-      styles = {},
       width,
       isColumnHovering,
       isRowHovering,
       index,
+      meta,
+      tableMeta,
       ...rest
     },
     ref
@@ -291,9 +290,12 @@ Table.Cell = forwardRef(
           height: "65px",
           maxHeight: "65px",
           whiteSpace: "nowrap",
-          ...cellStyles,
-          ...pinnedStyles,
-          ...styles,
+          ...tableMeta.cellStyles,
+          ...tableMeta.pinnedStyles,
+          ...tableMeta.styles,
+          ...meta.cellStyles,
+          ...meta.pinnedStyles,
+          ...meta.styles,
         }}
         width={{
           base: `${width || maxWidth}px`,

src/components/tableV2/core/headCell.js

@@ -48,9 +48,10 @@ const HeadCell = ({
 }) =>
   headers.map(({ id, colSpan, getContext, isPlaceholder, column, getResizeHandler, getSize }) => {
     const { getCanSort, columnDef, getCanResize, getIsResizing } = column
-    const { meta } = columnDef
+    const { meta, tableMeta } = columnDef
     const headStyles = {
       verticalAlign: "baseline",
+      ...(tableMeta?.headStyles || {}),
       ...(meta?.headStyles || {}),
       ...pinnedStyles,
     }

src/components/tableV2/core/rows.js

@@ -81,7 +81,8 @@ const Rows = ({
                 width={cell.column.getSize()}
                 onMouseEnter={() => onHover({ row: row.id, column: cell.column.id })}
                 onMouseLeave={() => onHover()}
-                {...cell.column.columnDef.meta}
+                tableMeta={cell.column.columnDef.tableMeta}
+                meta={cell.column.columnDef.meta}
                 {...(cell.column.getCanSort() &&
                   coloredSortedColumn &&
                   !!cell.column.getIsSorted() && {

src/components/tableV2/features/useColumns.js

@@ -2,9 +2,9 @@ import { useMemo } from "react"
 import useRowSelection from "./useRowSelection"
 import useRowActions from "./useRowActions"
 
-export default (dataColumns, { rowActions, enableSelection, testPrefix }) => {
-  const rowActionsColumn = useRowActions(rowActions, { testPrefix })
-  const selectionColumn = useRowSelection(enableSelection, { testPrefix })
+export default (dataColumns, { rowActions, enableSelection, testPrefix, tableMeta }) => {
+  const rowActionsColumn = useRowActions(rowActions, { testPrefix, tableMeta })
+  const selectionColumn = useRowSelection(enableSelection, { testPrefix, tableMeta })
 
   return useMemo(() => {
     if (!dataColumns || dataColumns.length < 1) return []
@@ -22,6 +22,7 @@ export default (dataColumns, { rowActions, enableSelection, testPrefix }) => {
         enableHiding: true,
         enableResize: true,
         footer: props => props.column.id,
+        tableMeta,
         ...col,
         accessorKey: col.accessorKey || col.id,
       }

src/components/tableV2/features/useRowActions.js

@@ -43,7 +43,7 @@ export const supportedRowActions = {
   },
 }
 
-export default (rowActions, { testPrefix } = {}) => {
+export default (rowActions, { testPrefix, tableMeta } = {}) => {
   const availableRowActions = useMemo(
     () =>
       Object.keys(rowActions).reduce((acc, key) => {
@@ -90,5 +90,6 @@ export default (rowActions, { testPrefix } = {}) => {
     enableColumnFilter: false,
     enableSorting: false,
     meta: { stopPropagation: true },
+    tableMeta,
   }
 }

src/components/tableV2/features/useRowSelection.js

@@ -3,7 +3,7 @@ import { Checkbox } from "src/components/checkbox"
 
 const width = 45
 
-export default (enabled, { testPrefix }) =>
+export default (enabled, { testPrefix, tableMeta }) =>
   useMemo(
     () =>
       enabled
@@ -34,6 +34,7 @@ export default (enabled, { testPrefix }) =>
             maxSize: width,
             minSize: width,
             meta: { stopPropagation: true },
+            tableMeta,
           }
         : null,
     [enabled]

src/components/tableV2/netdataTable.js

@@ -59,6 +59,7 @@ const NetdataTable = ({
   testPrefixCallback,
   virtualizeOptions = {},
   coloredSortedColumn = true,
+  meta: tableMeta = {},
   ...rest
 }) => {
   const [columnVisibility, setColumnVisibility] = useState(defaultColumnVisibility)
@@ -115,7 +116,7 @@ const NetdataTable = ({
     setGlobalFilter(String(value))
   }, [])
 
-  const columns = useColumns(dataColumns, { testPrefix, enableSelection, rowActions })
+  const columns = useColumns(dataColumns, { testPrefix, enableSelection, rowActions, tableMeta })
 
   const table = useReactTable({
     columns,