Fluentui: New Component: Editable Table

[micahgodbolt]

Component Details

A component for laying our rows of table'like data. In the past devs often reached for DetailsList when all they wanted was to display rows of data/form elements. A Table, TableList, GridList (whatever) component would be a lighter weight list view without all the row selection functionality.

It's possible that this could become an abstraction for the details list, moving all of the core layout logic into it, and leaving the selection/custom logic into the details list itself.

Imports

List

Exports/ Component Breakdown

Table

Intended Package

OUFR

Code mockup/example

__Code Sample__

__Types__

| Name | Type | Default Value | Description |
|-----------|----------|---------------|-------------|
| className | string | | Optional class name to be added to the root |

Design Assets

Component Ownership

Core Tactical component

Deadlines

Steps

• [ ] Themable (Component.base/Component.styles)
• [ ] Unit tests
• [ ] Visual tests
• [ ] Documentation and examples
• [ ] Keyboard Accessible
• [ ] High Constrast Support
• [ ] RTL Support
• [ ] Design Review
• [ ] API review
• [ ] Public Preview
• [ ] Ready for Publishing

[KevinTCoughlin]

We've had a few folks ask for editable cell support [#5329]. Do you think that would align well with this new component or should we consider that out-of-scope for now?

[micahgodbolt]

not sure if they are the same thing, but editable cells could be built off of this

[micahgodbolt]

interesting thought here....how do we define each row of data in this table? It's basically a bunch of forms stacked on top of each other right? Could this table be defined as an array of Form elements, and could this be a good opportunity to look at #5582 and define each row via a JSON schema, rather than a specific JSX element? i.e. a column could be a hex value selected via a textfield today, and tomorrow switch to a color picker. That should be as adding a 'color' format'.

{
  "title": "Person",
  "type": "object",
  "required": [
    "name",
    "age",
    "date",
  ],
  "properties": {
    "name": {
      "type": "string",
      "description": "First and Last name",
      "minLength": 4
    },
    "age": {
      "type": "integer",
      "default": 25,
      "minimum": 18,
      "maximum": 99
    },
    "favorite_color": {
      "type": "string",
      "format": "color",
      "title": "favorite color",
      "default": "#ffa500"
    }
  }
}

[lukasbash]

Quick question when reading this:

A component for laying our rows of table'like data. [...]

... and reading the current status and progress on this issue (as far as I can see, something between backlog and proposal :smile: ) I wanted to ask if it makes sense to split up the issue to first, get a table component without editable features to get it done earlier, and a second one to put in the editable stuff?

I am currently using the DetailsList component with some custom implementations (also some that you might not consider as worth to be standardized).

Cheers

[daxamin]

Any updates on this feature?

[micahgodbolt]

not on our radar at the moment for core controls

[DesignPolice]

@micahgodbolt, hello there, we have a new product that could use this feature… looks like this has stalled out a bit, but just wanted to verify if it was continuing be a backlog item or if there was something that might be coming out. Thanks

[kwiremo]

Is this still on your radar?

[micahgodbolt]

Probably won't be a core control (at least for a while). Would be a good candidate for a partner team to build/own/share.

[DesignPolice]

Thanks @micahgodbolt

I will touchbase with our team and see if this some lifting we can help with - I know we are needing it in a few spots. Thanks for the update.

[mareekuh]

@DesignPolice - The above looks like a table. What about a list? The file-open/save type list view with the ability to rename/add?