Skip to main content

Styling

xlmake offers various ways to apply styles.

Presets​

The easiest way is to use presets.

.table({
  preset: "basic",  // Blue header + all borders
  columns: [...],
  data: [...],
})

Available presets:

  • basic - Blue header, white text, all borders
  • minimal - Bold header only, no borders
  • striped - Blue header, alternating gray background, all borders

CellStyle​

You can specify detailed cell styles.

{
  // Font
  fontFamily: "Arial",
  fontSize: 11,
  bold: true,
  italic: true,
  underline: true,
  strike: true,

  // Colors
  color: "#FF0000",    // Text color
  fill: "#FFFF00",     // Background color

  // Alignment (horizontal only, or vertical-horizontal compound)
  align: "center",     // "left" | "center" | "right" | "top-left" | "bottom-center" etc.

  // Number format
  format: "number",
  decimalPlaces: 2,
  thousandsSeparator: true,
}

Table Style​

Apply styles to the entire table header and body.

.table({
  columns: [...],
  data: [...],
  style: {
    header: { bold: true, fill: "#4472C4", color: "#FFFFFF" },
    body: { fontSize: 11 },
  },
})

Column Style​

Apply styles to specific columns.

.table({
  columns: [
    { key: "name", label: "Name" },
    { key: "price", label: "Price", style: { bold: true } },
    { key: "warning", label: "Warning", style: { color: "#FF0000" } },
  ],
  data: [...],
})

Conditional Style​

Apply styles based on data values.

.table({
  columns: [...],
  data: [...],
  conditionalStyle: (row, col) => {
    if (col === "profit" && row.profit < 0) {
      return { color: "#FF0000" };  // Red text
    }
    if (col === "price" && row.price >= 10000) {
      return { bold: true };  // Bold
    }
    return {};
  },
})

Cell-Level Style (_style)​

Apply styles to specific cells only.

.table({
  columns: [...],
  data: [
    { name: "Normal", price: 100 },
    {
      name: "Sale",
      price: 50,
      _style: {
        price: { bold: true, fill: "#FFFF00" },
      },
    },
  ],
})

Style Priority​

Styles are applied in this order (later ones take precedence):

  1. Preset - preset: "basic" etc.
  2. Table Style - style.header / style.body
  3. Column Style - columns[].style
  4. Conditional Style - conditionalStyle
  5. Cell-Level Style - data[]._style

Number Format​

.table({
  columns: [
    {
      key: "price",
      label: "Price",
      style: {
        format: "number",
        thousandsSeparator: true,  // 1,234,567
      },
    },
    {
      key: "rate",
      label: "Rate",
      style: {
        format: "number",
        decimalPlaces: 2,  // 12.34
      },
    },
  ],
  data: [...],
})

Borders​

.table({
  columns: [...],
  data: [...],
  border: {
    outline: "medium",      // Outer border
    headerBody: "medium",   // Header-body boundary
    headerInner: "thin",    // Header internal
    bodyInner: "thin",      // Body internal
    borderColor: "#000080", // Border color
  },
})