> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nextedy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling and Formatting

> Nextedy RISKSHEET provides a comprehensive set of styling and formatting options that let you customize the visual appearance of your risk analysis tables.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

<Columns cols={3}>
  <Card title="Configure Cell Styles" icon="file" href="/risksheet/guides/styling/cell-styles">
    Define CSS styles for cells, headers, and column groups using the `styles` property in your configuration.
  </Card>

  <Card title="Configure Row Header Styles" icon="file" href="/risksheet/guides/styling/row-header-styles">
    Customize row header appearance with custom renderers and conditional coloring based on risk values.
  </Card>

  <Card title="Add Header Tooltips" icon="file" href="/risksheet/guides/styling/header-tooltips">
    Add descriptive tooltips to column headers to provide guidance and context for data entry fields.
  </Card>

  <Card title="Apply Conditional Formatting" icon="palette" href="/risksheet/guides/styling/conditional-formatting">
    Use cell decorators to apply dynamic styling based on cell values, highlighting risk thresholds and status indicators.
  </Card>

  <Card title="Configure Item Colors" icon="file" href="/risksheet/guides/styling/item-colors">
    Set up severity-based cell coloring and visual indicators to highlight required fields and risk levels.
  </Card>
</Columns>

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/yWl5nA2D0IzEnZC1/risksheet/diagrams/guides/styling/index/diagram-1.svg?fit=max&auto=format&n=yWl5nA2D0IzEnZC1&q=85&s=4060df3b3b1242d80c72e2a6a3abcc45" alt="diagram" style={{ maxWidth: "700px", width: "100%" }} width="700" height="280" data-path="risksheet/diagrams/guides/styling/index/diagram-1.svg" />
</Frame>

<Tip title="Styling best practice">
  Define your CSS class names in `styles`, write the conditional logic in `cellDecorators`, and reference the decorator by column `id`. Always use `!important` in style definitions to override grid defaults.
</Tip>

<LastReviewed date="2026-06-24" />
