tables

tables is an object within the theme property for overriding table and pivot table styles.

To override table cell fontFamily use baseFont.

<Vizzly.Dashboard
  // ...
  theme={{
    tables: {
      th: {
        background: "transparent",
        fontSize: 13,
        fontWeight: 600,
        padding: "0.5rem",
        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",
          },
        },
      },
    },
  }}
/>

Basic Tables

Basic tables are a View type for dashboard cells within <Vizzly.Dashboard/>.

To use column and row grouping, or drilldowns, use Pivot Table.

License
Total Number of Start
Contributors
Apache-2.0 License
11060
880
MIT License
13771.79 
768.15
GPL-3.0-or-later
7000
530

License	Total Number of Start	Contributors
Apache-2.0 License	11060	880
MIT License	13771.79	768.15
GPL-3.0-or-later	7000	530

Pivot Tables

Pivot tables are a View type for dashboard cells within <Vizzly.Dashboard/>.

Pivot tables extend Basic Tables but support column grouping, row grouping, and drilldowns.

Stats
License
Total Number of Start
Contributors
Apache-2.0 License
11060
880
MIT License
13771.79 
768.15
GPL-3.0-or-later
7000
530

	Stats
Apache-2.0 License	11060	880
MIT License	13771.79	768.15
GPL-3.0-or-later	7000	530

Default Values

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,
        padding: "0.5rem",
        textTransform: "none",
        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",
          },
        },
      },
    },
  }
 
  return (
    <Vizzly.Dashboard
      // ...
      theme={theme}
    />
  )
}