Hi , I'm working on a custom page (not a resource page) and using

sortableTable

. I have a few questions: 1. How can I add a link to a table cell (like the implementation for the "local" in the 'name' column)? 2. How can I display badges (e.g., "Active") inside the first cell? 3. What's the best way to show sub-text within a table cell? 4. Not sure how hasAdvancedFiltering & TableActions checkbox works. Also, is there any documentation that clearly explains all available options for configuring

sortableTable

headers and rows? Would appreciate any guidance or examples—thanks!

@breezy-airplane-74201 here’s an example of a

SortableTable

: https://github.com/rancher/dashboard/blob/master/shell/detail/namespace.vue#L234-L252 There’s crucial fields here like

headers

, which control the the cols displayed https://github.com/rancher/dashboard/blob/master/shell/detail/namespace.vue#L40-L86 and one of the “key” properties here is the

name

, which is the “ID” of the col. Another important one is

value

, which is where this col will grab the value from. On this example https://github.com/rancher/dashboard/blob/master/shell/detail/namespace.vue#L49 it will get the value from the property

byState.error

in whatever you define as rows. What are

rows

?

rows

are the other crucial field, which has the values you want to render, per row of the table https://github.com/rancher/dashboard/blob/master/shell/detail/namespace.vue#L111-L131 On this bit of code, you can we are adding the

byState

there… that’s where it will grab the value for the example before One other important information is how you can “override” whatever is shown on each row cell, if what is on the

headers

is not enough. On https://github.com/rancher/dashboard/blob/master/shell/detail/namespace.vue#L241-L251, specifically https://github.com/rancher/dashboard/blob/master/shell/detail/namespace.vue#L241 we are overriding the col named

type

and showing a link there. This maps to the headers

name

property. You can render whatever you want this way. Ignore

hasAdvancedFiltering

. Always set it to false. That’s an advanced and experimental feature which I won’t dive into. this is the documentation we have (not advertised and may be out of date as it’s only internal): https://extensions.rancher.io/internal/code-base-works/customising-how-k8s-resources-are-presented#customising-tables State

Badges

is just the usage of a specific formatter called

BadgeStateFormatter

, which can be found on the link above. Scour the Dashboard code for more info. You can also search for

ResourceTable

, which is essentially the same as the

SortableTable

but it has some extra bits

Thanks a lot. @busy-ability-54059 It would be great you guys can update your storybook. https://rancher.github.io/storybook/?path=/docs/welcome--docs

We've definitely let our storybook languish. I've taken an internal note so hopefully we can address it soon.

hi @busy-ability-54059 Can you tell me how to work with TableAction and RowsAction props in

<SortableTable/>

component?