It doesn't appear the Vuetify data table grouping handles the paging correctly when group headers are collapsed. If you want to collapse all group headers, you have to page through was appears to be empty pages until you get to the next group header.
Codepen example
<v-data-table
:headers="headers"
:items="stocks"
item-key="name"
sort-by="name"
group-by="sector"
class="elevation-1"
></v-data-table>
After collapsing the first header, I would think the next group header would appear with enough rows to fill the page. Instead, you have to page through several "empty" pages (the number of pages corresponds to the number of rows in the first grouping). How can I configure the grouping which will bring the next grouping into view when I collapse the previous grouping?
yes, this is pretty annoying. there is an open issue for it: https://github.com/vuetifyjs/vuetify/issues/13754
as you're likely aware, the 'workaround' is to disable paging (or grouping). if you have a large table performance will be poor - which is why you used paging in the first place.
Related
We have a request from our designers to build tables something like this, with rows that expand to show essentially another sub-table underneath. In KendoUI documentation, this is called "Hierarchy."
We use SlickGrid v2.3 with a few additional plugins. We currently have tables with a similar row expand/collapse like this: https://mleibman.github.io/SlickGrid/examples/example5-collapsing.html . That does not allow for a completely different set of columns in the sub-table.
The question is, can this be done in SlickGrid or not?
It might be hard to do with current SlickGrid, there's no code that handles the hierarchical part itself so that would be lot of work to implement in SlickGrid. However it is implemented in Slickgrid-Universal, which is a wrapper on top of SlickGrid. You can see Example 5 and Example 6 which shows 2 types of Tree Data grids (hierarchical or parentId refs). We use it in production for a project that we have. Also note that this is not a grid within a grid, it's rather an expand/collapse the same as what you found in example5-collapsing.html, the only differences with SlickGrid is that Slickgrid-Universal has the code to deal with hierarchical data (filtering/sorting) while SlickGrid itself doesn't and also another nice to know thing is that expand/collapse is actually using data filtering behind the scene and you can see that in the total items displayed when you have the footer enabled.
Please note that I'm the author of Slickgrid-Universal and also a major contributor to SlickGrid as well
At the moment, it can't be done. In order to achieve its speed, Slickgrid enforces a fixed row height and a single scrolling canvas. It's just a different approach than used by HTML display grids.
You could put together a workaround using mutiple slickgrids or an embedded slickgrid in a group row, I suppose, but it would be messy.
One thing I have done is develop a SlickCombo, which is essentially a grid presented as a multi-column dropdown. It's a full grid and can offer editing.
That's probably as close as you'd get.
A comment: the MLeibman repo is long dead - you should be using: https://github.com/6pac/SlickGrid
For an app a table, that is dynamically populated with data, is important.
How should I do the tab order for tables of data? I searched for guidelines, but could not find a good one so far.
Possibilities I see are:
Only include the table itsef using a 'tabindex=0' attribute in the 'table' tag.
Include the table rows in the tab order with a 'tabindex=0' attribute in the 'tr' tag.
I guess using the arrow keys will allow for detail navigation.
What do you advice?
The table itself and the rows themselves are generally not keyboard focusable because they're not interactive elements. If the row was selectable or expandable, then maybe it could be focusable but it's usually an element in the table row (or more accurately, an element in a the table cell) that is selectable or expandable.
Without more details on the behavior you're trying to achieve, it's hard to give exact advice, but my initial thought is that none of the table elements proper (<table>, <tr>, <td>) should be focusable.
Regarding arrow keys for navigation, that's the pattern for a grid, which is a type of table that has editable cells (similar to a spreadsheet). Again, I don't have enough info on your situation to know if a grid is what you're trying to create.
For screen reader users, they already have a way to navigate to the table and navigate within the table using the screen reader shortcut keys, so don't worry about trying to make things focusable for screen reader users.
Lately I heard another suggestion from an expert.
Generally speaking, all interactive elements should be included in the tab index, such as buttons, form fields and links. If the entire table row can be clicked, this should be in the tab flow by means of a tab index 0.
I'm trying to create a report with some controls "anchored" to the very end. The difficulty is that I can't add this to the page footer because the report could span multiple pages leaving a giant white space at the end of each report if I decide to toggle visibility. The items I have should only appear on the very last page and be positioned just above the footer.
For example, in this scenario, I need the letter's closing signature, titles, etc. positioned at the very end of the last page the report spans.
As an alternative to adding a sub report you could try the suggestion below.
It all depends on how you data is laid out in your report whether it could work for you.
If all the data required to populate the controls exists in the report dataset why not add an outer lever of grouping that encompasses the entire dataset. You could do this using a dummy column containing 1 for example.
Just add a footer to this group and put your data in the group footer.
You can additional rows as necessary to the group footer.
This footer will always appear as the last row(s) in the tablix
I have a jqgrid that has a lot of information for each record. It's causing a lot of horizontal scrolling and I'd like to avoid that.
I thought about using a subgrid, but every example I've seen for subgrid has the sub-info collapsed and I don't really want that. I just want the 2nd row for each record to be indented a bit.
Is there a good way to handle this besides using a subgrid. The other drawback to subgrid I've found is that it wants to load secondary data on the click to expand it. I'd rather just have all of the data loaded on the initial grid load.
TIA
I have a scenario where i need to use scrolled paging on my jqgrid, and it works perfectly. But now i need to add dynamic grouping capabilities to the grid as well. The problem I face, is that when I group the grid, only records in teh currently loaded page get grouped, and not the whole underlying dataset. Is there a way to acheive this using jqgrid.
a. Grouping groups all rows in a dataset, not just the ones loaded in a scrolled page in the grid.
b. When expanding such a group and scrolling, the grouped rows now follow scrolled paging
Any help here would be appreciated as I have been trying to figure this out for a while now with no luck :-(
Thanks
Lokesh