When I use printTable(data), I get a compact format and the column values are complete. But when I use Inputs.table(data, …), some columns are very wide with whitespace, and other column values are truncated (with a … suffix) . How do I resolve these formatting issues?
I assume you’re referring to the printTable from Data Utilities / UW Interactive Data Lab / Observable? (This forum covers all Observable users, and anyone could write a printTable function, so I’m just kinda guessing you’re using a popular one!)
You can switch the Inputs.table layout between auto (columns are sized wider/narrower according to contents) and fixed (all columns are the same size) like this:
Inputs.table(data, {layout: "auto"})
Inputs.table(data, {layout: "fixed"})
It defaults to layout: "fixed" for ≤12 columns, so I suspect that’s what you’re seeing; I think printTable always uses layout: "auto" (which is the generic CSS default for HTML tables, not specific to either of these JavaScript functions for making tables from arrays of objects).
You can also define formatters for individual columns if they’re blowin up the layout. E.g., to truncate the bio column to 40 characters:
Inputs.table(data, {format: {bio: d => d.substring(0, 40)}})
In general it’s hard to come up with one set of formatting guidelines that work for all tables. If you post a specific example I may be able to give more specific help.
1 Like