Table with editable cells

[renlite]

Hi,
would it be possible to get a design for editable cells in a table?
Example:

• Editable cells have different color background and are focusable. Technically they are input-elements with css design for pico-table.
• Input-Field with focus gets a bottom-border and a cursor. The background could have a different color.

[vardumper]

How about? https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable (Firefox is the only problem-child here). I'd be curious if support for this is even on the Firefox roadmap... you should be able to add event listeners on the keyup event, and trigger your desired action.

[renlite]

Thank you, this is helpful. But, if you would like to use a DropDown, a DateField or a Button (...) in the Table an Input-Element would be necessary.

[ricpastori]

I agree that Pico should not attempt to provide the behavior of an editable data grid, but I think there is a useful CSS feature inside this request.

Form controls already work inside table cells, although they retain their normal field padding, border, background and height in addition to the cell padding. This can make an otherwise simple editable table unnecessarily heavy.

An explicit table modifier could integrate direct child inputs and selects into the cell surface: remove the duplicated cell padding, preserve a sufficiently large target, and make hover, focus, readonly and validation states clear. It would remain purely presentational—saving, cancelling, keyboard grid navigation and data management would still belong to the application.

The documentation should also require an accessible name for every control; row and column headers provide table context but should not be assumed to replace a label automatically.