Table rfc #458
Table rfc #458
Conversation
|
|
rfcs/table.md
Outdated
| ## Exports | ||
|
|
||
| * `Table` | ||
| * `StatefulTable` |
There was a problem hiding this comment.
What state does the StatefulTable handles?
There was a problem hiding this comment.
I originally included StatefulTable, but since I wasn't able to find a need for it yet, I'll remove it until there is a need.
rfcs/table.md
Outdated
| } | ||
| render = () => { | ||
| return ( | ||
| <Table |
There was a problem hiding this comment.
Seems like there should be some loading state in the table with remote data
There was a problem hiding this comment.
okay, I'll add an isLoading prop to the table.
rfcs/table.md
Outdated
|
|
||
| ## `Column` API | ||
| One of the Table columns prop for describing the table's columns, Column has the same API. | ||
| * `title: string` - Required. Title of the column to display in the header. |
There was a problem hiding this comment.
How about React.Node instead of a string?
There was a problem hiding this comment.
Yeah that's a good suggestion, in someone wants to display custom html in the header.
rfcs/table.md
Outdated
| * `dataIndex: string` - Optional. Attribute at which to index the row data. | ||
| * `render: <T>(<T>, index, Array<T>) => $ReactNode` - Optional. Renderer of the table cell. The return value should be a ReactNode. | ||
| * `sorter:Function`- Optional Sort function for [local sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) | ||
| * `defaultSortOrder:'ascend'|'descend'`: Only to be declared on one of the columns, this will be define the default sort on the initial set of data. |
There was a problem hiding this comment.
Why not a prop of the Table component? To avoid the ambiguity of defaultSortOrder defined on multiple columns.
rfcs/table.md
Outdated
| ## Accessibility | ||
|
|
||
| How can this component be used via keyboard controls? | ||
| No keyboard shortcuts will be enabled. |
There was a problem hiding this comment.
Might be nice to enable highlighting via keyboard? e.g. click in a cell, table gains keyboard focus, move the highlight with arrow keys. I'm ambivalent...also, this would add local state, which we might want to avoid if possible.
There was a problem hiding this comment.
https://bvaughn.github.io/react-virtualized/#/components/ArrowKeyStepper
Provided out of the box here
There was a problem hiding this comment.
Thanks for the suggestion. I'll add it to the RFC
rfcs/table.md
Outdated
| will be rendered. | ||
|
|
||
| The [W3 guideline for table states](https://www.w3.org/WAI/tutorials/tables/): | ||
| > Header cells must be marked up with `<th>`, and data cells with `<td>` to make tables accessible. For more complex tables, explicit associations may be needed using `scope`, `id`, and `headers` attributes. |
There was a problem hiding this comment.
Ahhh...this is certainly a benefit of sticking to the HTML table spec...hm. I do see ARIA roles on react-virtualized, at least: bvaughn/react-virtualized#606
There was a problem hiding this comment.
react-virtualized does add aria-* roles & sets tabIndex to assist with keyboard nav.
It also provides some additional components ie: ArrowKeyStepper to help with navigating virtualized lists
rfcs/table.md
Outdated
| } | ||
| }; | ||
|
|
||
| class TableWithPagination extends React.Component { |
There was a problem hiding this comment.
As per our convo aswell yesterday might be good to include what pagination looks like with infinite scrolling. IE async requests on scrolling table.
make docs builds for table rfc
|
closing this to continue conversation in #632 |
This is a technical proposal for baseUI regarding the API design of a basic table, which handles the canonical table format of one header row and many rows of data. Any other table formats (e.g. having rows or columns that may span multiple rows or columns can be handled using a renderProp)
Also, there will be support for sorting.
I had a question about what was the best way to determine how many rows are displayed initially in the table. Let's say the user has 5000 rows to load into a table. I was thinking about arbitrarily setting a
pageSizeof 10, such that 10 rows are displayed initially, and then on user scroll or click of a pagination element, more elements are displayed. This lends the question: should a table come with a scrollbar and/or pagination element out of the box? I currently don't have this documented in the proposal but needed further discussion.