How to align columns (right, center) in @svar-ui/svelte-grid?

RustUser

I’m trying to align specific columns in a Svar Grid — for example, make the id column right-aligned and the name column center-aligned.

In the documentation and examples I found, the column definitions use something like css: "right", but in my case that doesn’t seem to work.
The class name I specify isn’t actually assigned to the generated cell elements.

As a workaround, I currently use a CSS selector targeting data-col-id, which works fine, but I’d like to understand the intended or best practice approach.

Questions:

What’s the recommended way to align columns in Svar Grid (e.g. right or center)?
Why isn’t the CSS class from the column’s css property applied to the cell elements?

<script lang="ts">
  import { Grid, Willow } from "@svar-ui/svelte-grid";

  // --- 1. Dummy data ---
  let people = [
    { id: 1, name: "Alice1" },
    { id: 2, name: "Bob" },
    { id: 3, name: "Charlie" },
  ];

  // --- 2. Define columns ---
  let columns = [
    {
      id: "id",
      header: "ID",
      field: "id",
      width: 80,
      sort: true,
      resizable: true,
//      css: "right", // TODO: This did not work
    },
    {
      id: "name",
      header: "Name",
      field: "name",
      width: 150,
      sort: true,
      resizable: true,
//      css: "center",
    },
  ];
</script>

<Willow>
<div class="demo-grid">
  <Grid {columns} data={people}/>
</div>
</Willow>

<style>
/* Right-align ID column */
:global(.demo-grid [data-col-id="id"][role="gridcell"]) {
  text-align: right;
}

/* Center-align Name column */
:global(.demo-grid [data-col-id="name"][role="gridcell"]) {
  text-align: center;
}
</style>

tasha

Hello RustUser,

To style columns you can use columnStyle property.

Please take a look at the example: https://stackblitz.com/edit/sveltejs-kit-template-default-dugpqgj8?file=src%2Froutes%2FMyGrid.svelte

Why isn’t the CSS class from the column’s css property applied to the cell elements?

Could you please provide the links in the documentaoin where the css property is used for the columns?

RustUser

Thanks for your fast response. For now, I got it working by using columnStyle, so thanks for confirming that path. I noticed that the css: property is mentioned in the docs and shown in some examples, so I initially assumed it should work — it actually took me a bit of time to figure out that it doesn’t. The column definition approach would make a lot of sense in this context: defining visual alignment or other styles directly where the column is declared feels much more natural and self-contained than using a separate columnStyle function. It would still be great if setting a class or css property on the column worked out of the box, since that would keep configuration and styling intent together and make the column definitions easier to read and maintain.

In the documentation i found references to the code examples where it was used.

svelte/svar-widgets/grid$ rg "css:"
rg "css:"
store/src/sizes.ts
26:	css: string,

svelte/tests/data.js
668:				header: ["", { text: "Email", rowspan: 2, css: "center" }],
693:				footer: { text: data.length, css: "right" },
749:			footer: { text: data.length, css: "right" },

site/src/ThemeSelect.svelte
8:			css: "wx-willow-theme",
15:			css: "wx-willow-dark-theme",

svelte/demos/data.js
783:			header: ["", { text: "Email", rowspan: 2, css: "center" }],
791:				{ text: "Company", colspan: 2, css: "center" },
810:			footer: { text: data.length, css: "right" },
858:						css: "center",
886:				footer: { text: data.length, css: "right" },
937:			footer: { text: data.length, css: "right" },

svelte/demos/cases/ResponsiveMode.svelte
19:			footer: { text: data.length, css: "right" },
39:					footer: { text: data.length, css: "right" },
82:					footer: { text: data.length, css: "right" },

svelte/tests/cases/TableHeaderFooterSpans.svelte
29:				{ text: "Email", rowspan: 2, css: "center" },
34:				{ text: "Email", rowspan: 2, css: "center" },
40:				{ text: "Company", colspan: 2, css: "center" },
45:				{ text: "Company", colspan: 2, css: "center" },

svelte/tests/cases/InlineEditors.svelte
16:			css: "center",
24:			css: "center",
33:			css: "center",
41:			css: "center",
49:			css: "center",
57:			css: "center",
65:			css: "center",

svelte/demos/cases/Filters.svelte
121:			footer: { text: data.length, css: "right" },

svelte/demos/cases/Print.svelte
74:			footer: { text: data.length, css: "right" },

Also it was mentioned in colums docu (but for header)
https://docs.svar.dev/svelte/grid/api/properties/columns

Search in the documentation
https://docs.svar.dev/svelte/grid/search/?q=css

tasha

The css property is indeed applied to the header and footer cells of the columns. This means that while you can style these specific parts of the column, the styling does not extend to the cells of the column itself.

Currently, using the columnStyle function is the recommended way to apply styles to the entire column.