tables

<Vizzly.Dashboard
  // ...
  theme={{
    tables: {
      th: {
        background: "transparent",
        fontSize: 13,
        fontWeight: 600,
        column: {
          // (Pivot Tables only) Applied to 'Group rows'
          background: "rgba(48, 116, 217, 0.05)",
          borderRight: "1px solid #c3c6ca",
          color: "inherit",
          padding: "0.5rem",
        },
        row: {
          // (Pivot Tables only) Applied to 'Group columns'
          borderBottom: "1px solid #c3c6ca",
          borderRight: "1px solid transparent",
          padding: "0.5rem",
        },
        level: {
          2: {
            background: `rgba(48, 116, 217, 0.15)`,
          },
        },
      },
      body: {
        borderLeft: "none", // (Basic Tables only)
        borderRight: "none", // (Basic Tables only)
        odd: {
          background: "transparent",
          color: "initial",
          "&:hover": {
            color: "initial",
            background: "#f5f6f6",
          },
        },
        even: {
          background: "transparent",
          color: "initial",
          "&:hover": {
            color: "initial",
            background: "#f5f6f6",
          },
        },
        drilldown: {
          arrow: {
            stroke: 'black',
          },
        },
      },
    },
  }}
/>

import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
 
export function Dashboard() {
  const theme: VizzlyTheming.Base = {
    tables: {
      // Default Values
      th: {
        background: "transparent",
        borderBottom: "2px solid #c3c6ca",
        borderRight: "1px solid transparent",
        borderTop: 0,
        color: "inherit",
        fontSize: 13,
        fontWeight: 600,
        textTransform: "none",
        button: {
          color: 'inherit',
          background: 'transparent',
          padding: '8px',
          borderRadius: '8px',
          '&:hover': {
            color: 'inherit',
            background: "#ebeced",
          },
        },
        sort: {
          color: 'inherit',
          background: 'transparent',
          padding: '8px',
          borderRadius: '8px',
          '&:hover': {
            color: 'inherit',
            background: "#ebeced",
          },
        },
        inner: {
          padding: "0",
        },
        "&:hover": {
          background: "transparent",
          color: "#4b5462",
        },
        group: {
          fontSize: 13,
          fontWeight: 400,
          textTransform: "none",
        },
        column: {
          // (Pivot Tables only) Applied to 'Group rows'
          background: "rgba(48, 116, 217, 0.05)",
          borderRight: "1px solid #c3c6ca",
          color: "inherit",
          padding: "0.5rem",
        },
        row: {
          // (Pivot Tables only) Applied to 'Group columns'
          borderBottom: "1px solid #c3c6ca",
          borderRight: "1px solid transparent",
          padding: "0.5rem",
        },
        level: {
          2: {
            background: `rgba(48, 116, 217, 0.15)`,
          },
        },
      },
      body: {
        borderLeft: "none", // (Basic Tables only)
        borderRight: "none", // (Basic Tables only)
        cells: {
          borderBottom: "1px solid #eff0f1",
          borderLeft: "none",
          borderRight: "none",
          fontSize: "13px",
          padding: "7.3px 8px",
        },
        odd: {
          background: "transparent",
          color: "initial",
          "&:hover": {
            color: "initial",
            background: "#f5f6f6",
          },
        },
        even: {
          background: "transparent",
          color: "initial",
          "&:hover": {
            color: "initial",
            background: "#f5f6f6",
          },
        },
        drilldown: {
          arrow: {
            stroke: 'black',
          },
        },
      },
    },
  }
 
  return (
    <Vizzly.Dashboard
      // ...
      theme={theme}
    />
  )
}