docs(ui-table): function based examples are added to Table #1663
Conversation
| <Table.Cell | ||
| key={headerId} | ||
| width={headers.find(header => header.id === headerId).width} |
There was a problem hiding this comment.
This width props was deleted from the original class based example and missing from the functional too. Is there a reason for that?
There was a problem hiding this comment.
According to the docs Table.Cell doesn't have width prop and also in console below warning is shown
console.js:53 Warning: [Cell] prop 'width' is not allowed.
That's why I removed the width prop. If it is needed for some kind of a workaround solution I can add it back.
There was a problem hiding this comment.
okay, thanks for the clarification
| <FormField id="columnTextAlign" label="Set column text-align"> | ||
| <Flex margin="0 0 medium"> | ||
| {Object.entries(colTextAligns).map(([headerId, textAlign]) => { | ||
| return ( |
There was a problem hiding this comment.
This whole Formfield is missing from the function-based component.
There was a problem hiding this comment.
I just realized that the renderOptions function in the class-based example has two return statements, with the second one including the FormField. I think we should remove the unreachable return statement completely from the class-based component.
There was a problem hiding this comment.
I agree, it should be removed
| - ```javascript | ||
| const SortableTable = ({ caption, headers, rows }) => { | ||
| const initialColWidth = {} | ||
| headers.forEach((header) => { | ||
| initialColWidth[header.id] = 'start' | ||
| }) |
There was a problem hiding this comment.
This whole functional example doesn't work, it throws an error: TypeError: Cannot read properties of undefined (reading 'onRequestSort'). Can you please look into this again?
There was a problem hiding this comment.
I couldn't reproduce this issue in my local. I can sort the table as expected. Could you provide more context like if there is any like special settings set etc.?
There was a problem hiding this comment.
I checked it again, it works now 👍
| <Table.Row> | ||
| {(headers || []).map(({ id, text, width }) => ( | ||
| {headers.map(({ id, text, width }) => ( |
There was a problem hiding this comment.
Here there is truthy check in the class-based example "((headers || []).map(...", which is missing from here.
| return ( | ||
| <Tag | ||
| style={rowStyle} | ||
| role={isStacked ? 'row' : undefined} |
There was a problem hiding this comment.
This role prop is missing from the functional example
| .map((child, index) => { | ||
| return React.cloneElement(child, { | ||
| key: child.props.name, | ||
| // used by `CustomTableCell` to render its column title in `stacked` layout |
There was a problem hiding this comment.
I think this comment should be in the functional example too.
Kadirsaglm
force-pushed
the
write_functional_examples_for_table
branch
from
363ba97
to
b9e3fd3
Compare
Kadirsaglm
force-pushed
the
write_functional_examples_for_table
branch
from
b9e3fd3
to
5d16abe
Compare
No description provided.