APP-2302 Migrate table to prime-core #323
Conversation
ehhong
force-pushed
the
APP-2302
branch
2 times, most recently
from
76577eb
to
7ec0ea1
Compare
packages/core/src/lib/index.ts
Outdated
| export { default as TBody } from './table/tbody.svelte'; | ||
| export { default as TD } from './table/td.svelte'; | ||
| export { default as TH } from './table/th.svelte'; | ||
| export { default as TR } from './table/tr.svelte'; |
There was a problem hiding this comment.
looking for better ideas for these exported names 👀
There was a problem hiding this comment.
One of my favorite UI libraries is Material UI. I like how they name their table components - Table, TableBody, TableRow, etc: https://mui.com/material-ui/react-table/#api
There was a problem hiding this comment.
names updated to match! instead of TableHead, I named TableHeader and TableHeaderCell
| const cols = ['20%', '30%', '50%']; | ||
| const { container } = render(TableWith3Cols, { cols }); | ||
|
|
||
| for (const [i, width] of cols.entries()) { |
There was a problem hiding this comment.
this is recommended by the linter but using cols.entries() is firing a different lint error about JS versions
There was a problem hiding this comment.
Interesting! What's the error? Let me know if you want to take a look together.
There was a problem hiding this comment.
the error is:
Type 'IterableIterator<[number, string]>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.
not sure which tag we should use to resolve -- what version of JS are we using?
ehhong
force-pushed
the
APP-2302
branch
2 times, most recently
from
8a5c5bb
to
f705d96
Compare
| /** | ||
| * Custom table body style | ||
| * @example | ||
| * style="border-collapse" |
There was a problem hiding this comment.
How does the intellisense look with this example? Should it be wrapped in a ``` block?
There was a problem hiding this comment.
| const cols = ['20%', '30%', '50%']; | ||
| const { container } = render(TableWith3Cols, { cols }); | ||
|
|
||
| for (const [i, width] of cols.entries()) { |
There was a problem hiding this comment.
Interesting! What's the error? Let me know if you want to take a look together.
|
|
||
| A table. | ||
| ```svelte | ||
| <Table variant='fixed' cols=["30%", "30%", "40%"]> |
There was a problem hiding this comment.
How does the fixed table behave when contents overflow a cell?
There was a problem hiding this comment.
it wraps to maintain the widths, this example is with widths 10% and 90%
Questions
v-thead-->THeadth-->THtrvariant colors be updated?styleattribute on these components feels outdated, butclassis a reserved word so cannot be exported as an attributearray.entries()-- not sure how best to resolve?Changes