How to change box size in Slate

Hi all,

I am working on a project in Slate where a table is returning a dataframe. I need the table’s size to automatically adjust as the dataframe gets bigger so it does not require scrolling on the table itself. Is this even possible?

I am even willing to use a code sandbox to code an entire widget to get this going but even the sandbox doesnt seem to have the ability to adjust the size since it’s probably outside the scope.

Any help would be appreciated! :slight_smile:

Hello,

The size of the table widget can be controlled using CSS classes. You can use handlebars to dynamically specify classes. These can be set in Table Widget Editor > Styling Tab > ADDITIONAL CSS CLASSES.

For example, if you have a function named f_table_class:

const tableSize = <NUMBER_OF_DATASET_ROWS>.length < 20 ? "medium-table" : "large-table";
return tableSize;

you can set the additional css classes to {{f_table_class}}.

You can then use the various classes to define specific styles in the Styles panel, e.g.

.medium-table #w_my_table {
    height: 400px;
    width: 800px;
}

Unfortunately, specific style values (e.g. width) cannot be set using handlebars and you may have to configure various categories of table styles (e.g. small, medium, large) that change in a step-function fashion based on the number of rows/columns in your table.

You can also consider using pagination to display your data without paging involved.

Please let me know if you have any additional questions.

Best,
Gregorian

Hello @gpirindev,

Thanks for your response!

My table size can very drastically and i’m afraid the small medium large solution won’t cut it. It seems like the height property can’t accept handlebars either so I can’t dynamically adjust the height of the table based on the length of the table. So i’m pretty much stuck with making different classes based on size then :frowning:

The data i’m bringing in is from an object type so it’s in JSON format. What is pagination?

In the Properties tab of the table widget editor, you can find a Misc section. One of the options there is to enable paging and specify a page size. This will update your table to contain pages that you can switch between.

@gpirindev this slate is going to be printed out so the schedule must show properly without the need to scroll or change pages. This has been the main reason I am using this. it seems impossible to implement a print function anywhere in Foundry except Slate.

@matthew1 unfortunately I can’t think of other solutions besides making multiple classes based on size.

One workaround could be to set the default size to something very large and remove the outer widget table border, but this may result in a number of empty pages for smaller tables. The last few pages to be printed will be empty so you could skip printing them. You could probably achieve a similar solution with the code sandbox widget.