header

header is an object within the theme property for overriding dashboard header row styles.

<Vizzly.Dashboard
  // ...
  theme={{
    header: {
      borderBottom: `2px solid #cdcfd3`,
      title: {
        fontSize: 18,
        htmlElement: "span", // Supports 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span'
      },
    },
  }}
/>

Header

Headers

Header rows are added within <Vizzly.Dashboard/> by clicking the smaller 'Add' button ('Add Header Row') at the top left of any dashboard cell.

Default Values

import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
 
export function Dashboard() {
  const theme: VizzlyTheming.Base = {
    header: {
      // Default Values
      background: "#fff",
      borderBottom: `2px solid #cdcfd3`,
      borderTop: "none",
      padding: "0 0 0.5rem 0",
      textAlign: "left",
      title: {
        fontSize: 18,
        fontWeight: 500,
        lineHeight: 1.15,
        color: "inherit",
        fontFamily: "inherit",
        margin: "0",
        htmlElement: "span", // Supports 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span'
      },
    },
  }
 
  return (
    <Vizzly.Dashboard
      // ...
      theme={theme}
    />
  )
}