For right-aligned table cells, consider putting the sort arrow to the right side of the header.

Can we have an option to not allow row selection and header sort?

For the first there’s an issue here you can upvote: https://github.com/observablehq/inputs/issues/136 There’s not currently an issue for disabling sorting (either on a specific column, or on any columns), but you’re welcome to file an issue to track this feature request.

Grateful for an example of how one accesses the width and align properties. Thanks for this amazing tool!

The options for table are in the github: https://github.com/observablehq/inputs#Table

Here is an example: Table(penguins, { format: { culmen_length_mm: x => x.toFixed(1), culmen_depth_mm: x => x.toFixed(1), sex: x => x === "MALE" ? "M" : x === "FEMALE" ? "F" : "" }, width: { culmen_length_mm: 25, culmen_depth_mm: 25 } })

oh wow! thanks and thanks!

Maybe use italic for _layout_ in order to indicate that we can use {layout: 'fixed} or {layout: 'auto'}

Is it possible to download the table as an image?

No.

Is there a way to change the text that appears as the column headers?

See https://github.com/observablehq/inputs/issues/103

Hi @maxeneg , right now, you would have to remap your data with all its implications, for example Table(penguins.map(row=> ({ "Species" : row.species, "Island" : row.island, "Culmen Length (mm)": row.culmen_length_mm, "Culmen Depth (mm)" : row.culmen_depth_mm, "Flipper Length (mm)" : row.flipper_length_mm, "Body Mass (g)": row.body_mass_g, "Sex" : row.sex })), { format: { "Culmen Length (mm)": sparkbar(d3.max(penguins, d => d.culmen_length_mm)), "Culmen Depth (mm)": sparkbar(d3.max(penguins, d => d.culmen_depth_mm)), "Flipper Length (mm)": sparkbar(d3.max(penguins, d => d.flipper_length_mm)), "Body Mass (g)": sparkbar(d3.max(penguins, d => d.body_mass_g)), "Sex": x => x.toLowerCase() } })

It seems like if you set {rows : 18} or greater the lazy loading stop working, is it a bug?

Thanks, fixed. https://github.com/observablehq/inputs/releases/tag/v0.7.10

thanks!

Dear Mike, once I sort by a column (by clicking on its header) is it possible to clear that sort?

Also: how can I make table entries be hyperlinks. I tried ${md`[...]()`} but to no avail.

For table hyperlinks, you could define a format function, e.g, Inputs.table(penguins, {format: {island: d=>htl.html`<a href="https://www.google.com/search?q=${d}">${d}`}})

"shift-click to select a range of rows" – what if I want to deselect a range of rows?

I'm not sure how easy it would be to make the selection UI closer to built-in multi-select elements, but those have a much more fluent and capable interface this list of checkboxes (at least in Mac Safari). Click and drag selects multiple elements, command-click or command-drag deselects. Shift-click selects a range, though it behaves a little strangely sometimes when there is a complicated discontinuous selection. It is overall quite fast and easy to get to a desired selection and easy to tweak the selection.

You gotta click the checkboxes to deselect currently (or the top checkbox to deselect all). I like the idea of command-clicking a row to select or deselect, and command-dragging to toggle the selection of whatever rows you drag over. We didn’t want clicking (or shift-clicking) the row to toggle the selection because that would get in the way of selecting text, but I think hiding it behind the command modifier would be a useful power feature. Filed https://github.com/observablehq/inputs/issues/90

It would be useful to have an option to specify which rows are initially checked.

You can specify which rows are initially checked by using the value option, which sets the initial value of the table. This is a subset of data to use as the initial selection if multiple is true (the default), or a single data item if multiple is false.

perfect, thanks.

Hi @mbostock, would you kindly give us an example of how to assign a default value?

This might work: `{value : penguins[0]}`

Sadly no, it doesn't work. I've tried {value: 0}, {value:"[penguins]"}, {value: "penguins"}, {value: {species: "Gentoo"}}

You can add an option such as `value: penguins.filter((d) => d.species === "Gentoo")`; only the Gentoo penguins will be selected.

Would it make sense to be able to rename the column names? similar to format function but to customize the column names, I know you could just remap the property names.

That’s right, you can use array.map (or pass a lazy iterable that does the same thing). That said there is an open issue requesting the ability to specify derived columns, and to change how the column headers are formatted: https://github.com/observablehq/inputs/issues/83 https://github.com/observablehq/inputs/issues/103

How do you make the table narrower when you have only a few wide columns like in the example below?

You might play with width and/or layout options: Table(penguins, {columns: ["species", "culmen_depth_mm", "culmen_length_mm"], layout: 'auto', width: 400})

It works! Thanks!

Could numbers be formatted with number.toLocaleString() but without the english locale hardcoded, so it would follow the browser locale?

Yes, but you’ll need to specify your own format to do this explicitly. We chose to default to English so as to avoid using non-English number localization when the surrounding content is in English (e.g., as in this notebook). It would be nice if there were a way to change the locale more easily, rather than having to specify the format for each column. Tracking here: https://github.com/observablehq/inputs/issues/79

A locale option has been added in 0.7.19 to make this easier.

Thank you very much!

I have found it useful to create a formatting function to add a `title` attribute to see long names, e.g., concept: d => htl.html`<div title="${d}">${d}` Perhaps it would be worthwhile to make this an option (i.e., a title attribute equal to the cell value for a given column)? Thanks for all the great inputs, like table!

I’ve filed an issue to track this feature request: https://github.com/observablehq/inputs/issues/153