-
-
Notifications
You must be signed in to change notification settings - Fork 332
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Data Table refactor and cleanup #217
Comments
The use case is something like this - imagine you had a table mapped with four columns:
But you wanted to include extra details included in your source data but not visually present it on in the UI. Something like this:
Currently when tapping the row we only present the data visibly present in the data mapping. However, we should consider providing the full set of data for the row from the original source. |
Reference @ryceg proposal for handling data types for data table components: |
Note to self: native HTML tables + action. Perhaps with a Table component just for a simpler interface for generating HTML tables? |
Just as a note: On the docs page there is also a CodeBlock that shows an import of import { mapTableSource } from '@brainandbones/skeleton/components/Table/DataTableService'; which I'm pretty sure won't work as the alias @brainandbones/skeleton points to the src/index.ts rather than a directory alias. What probably needs to happen is that these DataTableService exports need to migrate to the top level src/index.ts file and probably have a bit of a namespace scoping like dtsSortAsc or something like that ? == |
Adding this for additional context to Nik's note above: |
Feature request: add table pagination |
@kimjunsung04 Already exists: https://www.skeleton.dev/components/paginators |
Feature request: Add an option to style the currently selected row as it's currently possible to style the row that's being hovered over |
Feature request: Add an option to enable multi row selection |
I've updated the original post at the top with desired updates up until this point. Expect updates throughout the week as I implement these changes. |
A new draft PR has been setup to preview progress: I've managed to make good progress on this today. This includes the follow. A new Tailwind Element stylesheet and documentation page has been setup for Tables. These provide the default styling values to table components. Next, I've created a new simple presentation table component called
Finally, I've stubbed out a documentation page for the power user component called |
This is coming along nicely! I've switched the example to use async data from an HTTP fetch call. But everything here is working as you might expect, minus the janky sorting heh. I'll aim to tackle that tomorrow, along with the following:
Preview: https://skeleton-gy60mtvgz-skeleton-ui.vercel.app/utilities/data-tables |
I have adjusted a few things today, a11y and pagination are now mostly working. However, I feel like the state management is really making things complicated. I think next go I'm going to look to convert this model to a store. This should greatly simplify the means to keep everything in sync and update to date! |
The table has been updated to use writable stores for state. All features (for release) have been implemented. Plus everything is documented. I've updated the PR from draft to "ready for review". Please begin testing this and supply any feedback here. Let's aim to do this asap so we have time to resolve issues prior to launch please! Thanks! |
NOTE: nearly all items reported by @ryceg on the PR comments have been resolved. Just awaiting feedback on the two items remaining. |
Noting this - we should implement more style props and customization options for the simple Table component. |
missing values in sourceData show as undefined in cell: keyboard selecting of row: This could also be done by updating the sample to paste in an on keydown handler ? this would also get rid of the a11y warnings that SK spits out. search: does not show sorting arrows in first display: dataTableSelect selects on first page of data: shows on first page of data, sort the table and it incorrectly stickies the choice, click column head again - back to the correct first page with selection, click column head again and now no selection is shown. done with |
Wasn't sure if this was in the Table or Data Table as you did not specify. Skeleton is only responsible for this in the Table component since we control what happens to the data. Currently this handles fine due to this condition:
So I'm assuming you mean in the data table, where as you mentioned, users will be responsible for sanitizing their own data.
Not sure we can squeeze this in before release. But should make for a great candidate for future updates.
I realized I forgot to to copy over the
I've made some modifications to the fuzzy search to help with this. Previously I would do this:
This works, but this means object keys were being searched too, not just the values. So I've now I'm using
I agree, but I was running into some bugs with this. May need to revisit post launch. Essentially there's a disconnect between the UI, the action, and the sort feature itself that I need to try and work around.
Yeah there was some major bugs between sort/pagination. So I've gone through and did a bit of refactor. It seems to be producing the expected results now though! |
Since we won't be able to fit EVERY request in this release, I've created this ticket to track requested updates: |
These updates may include, but are not limited to the following:
The text was updated successfully, but these errors were encountered: