Multiple tabulators with different styling

[meatballs]

Anyone got any thoughts on how to use multiple tabulators within an app but with different css styles applied?

Is there perhaps some way to add a consistent class to a table, row, cell and then use that class within my app's theme.css?

[s-cork]

Tabulator is just an HtmlTemplate
do you want a role property?

You can then combine it with the css selectors as defined here:
https://tabulator.info/docs/5.5/style#css

[s-cork]

oh wierd hold on

[s-cork]

Ok i've pushed a change and bumped the version
try now

[meatballs]

Yep! That's done the job!

[meatballs]

I'd tried this as one of my attempts but assumed I was doing something wrong. Glad I asked! Many thanks for the change.

[s-cork]

Yeah - I guess no one has ever used a role before!

[antletem]

This was a very helpful post!

and just to add a bit more to it.

Here is a role I have for my tables to give them curved edges and a rule for selected rows:

.anvil-role-tabulator-base {
  border-radius: 10px;
  /* Adjust the value to change the curvature */
  padding: 5px;
}

.anvil-role-tabulator-base .tabulator-selected {
  background-color: %color:Primary Container%  !important;
  color: %color:On Primary Container% !important;
}

Just because I was still having difficulties with implementation.