Datatable with RowGroup and Scroll scrollbar misplaced

UI Components for Vue
Post Reply
arthur_greve
Posts: 3
Joined: 09 Jul 2020, 18:16

09 Jul 2020, 19:06

I am using primevue DataTable component and when mixing RowGroup and Scroll features the grid layout is a bit odd.

When using both at the same time the vertical scrollbar is far to the right from the last table column, having a weird blank space from the column to the scrollbar
I am wondering if there is a way to put this scrollbar right next to the last table column.

The code below is just for POC and illustrate the problem

Code: Select all


<style>
    .p-rowgroup-header {
        text-align: center;
        font-weight: bold;
        background-color: rgba(46, 110, 165, 0.5) !important;
        color: #ffffff !important;
    }

    body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    body .p-datatable .p-datatable-thead > tr > th {
        padding: 0.571em 0.857em;
        border: 1px solid #c8c8c8;
        font-weight: 700;
        color: #333333;
        background-color: #f4f4f4;
        text-align: center;
    }
</style>

    <data-table data-key="id" :value="teams" row-group-mode="subheader" group-rows-by="name"
                sort-mode="single" :sort-field.sync="dynamicSortField" :sort-order.sync="dynamicSortOrder"
                :scrollable="true" scroll-height="500px">
        <column field="boss" header="BOSS"></column>
        <column field="name" header="Name"></column>
        <column field="birth" header="Birth"></column>
        <template #groupheader="slotProps">
            <span>{{slotProps.data.name}}</span>
        </template>
        <template #groupfooter="slotProps">
        </template>
    </data-table>
<script>
        new Vue({
            el: '#app2',
            components: {
                'data-table': datatable,
                'column': column
            },
            data: {
                teams: [{ "id": 24, "boss": "Brandy Bahringer", "name": "Alfa Romeo", "birth": "1992-05-12T14:18:09.2949538" }, { "id": 31, "boss": "Damon Harvey", "name": "Alfa Romeo", "birth": "1997-04-21T02:38:46.9439444" }, { "id": 1, "boss": "Alan Collier", "name": "Hass", "birth": "2006-11-02T20:52:11.9094739" }, { "id": 8, "boss": "Margie Gerlach", "name": "Hass", "birth": "1994-02-16T16:53:21.2851253" }, { "id": 25, "boss": "Rhonda Fahey", "name": "Hass", "birth": "1996-09-29T12:16:27.8516731" }, { "id": 48, "boss": "Jacqueline Stamm", "name": "Hass", "birth": "1998-11-16T19:04:55.8711556" }, { "id": 16, "boss": "Victoria Prohaska", "name": "Mclaren", "birth": "1994-02-04T02:02:49.3586235" }, { "id": 17, "boss": "Antoinette Fahey", "name": "Mclaren", "birth": "2018-11-16T07:00:55.0864829" }, { "id": 33, "boss": "Tommy Gutkowski", "name": "Mclaren", "birth": "2005-06-14T14:14:14.57955" }, { "id": 45, "boss": "Kayla Kuhn", "name": "Mclaren", "birth": "1993-10-21T09:33:07.5675898" }, { "id": 3, "boss": "Abraham D'Amore", "name": "Mercedes AMG Petronas", "birth": "2000-07-24T15:11:21.8958239" }, { "id": 5, "boss": "Tara Hoeger", "name": "Mercedes AMG Petronas", "birth": "2019-05-05T05:41:04.4029102" }, { "id": 6, "boss": "Dixie Goldner", "name": "Mercedes AMG Petronas", "birth": "1996-08-04T11:38:38.6227815" }, { "id": 14, "boss": "Margie Dietrich", "name": "Mercedes AMG Petronas", "birth": "2003-05-06T05:00:53.6526376" }, { "id": 19, "boss": "Tiffany Schiller", "name": "Mercedes AMG Petronas", "birth": "2018-12-17T05:57:57.5947999" }, { "id": 23, "boss": "Carole Huel", "name": "Mercedes AMG Petronas", "birth": "2005-09-16T09:06:41.3669793" }, { "id": 27, "boss": "Maurice Auer", "name": "Mercedes AMG Petronas", "birth": "2000-04-28T03:13:43.0651448" }, { "id": 39, "boss": "Darin Miller", "name": "Mercedes AMG Petronas", "birth": "2006-04-04T00:37:09.0226321" }, { "id": 41, "boss": "Jack Zboncak", "name": "Mercedes AMG Petronas", "birth": "2007-05-31T15:18:58.7797672" }, { "id": 42, "boss": "Jeannette Tremblay", "name": "Mercedes AMG Petronas", "birth": "2007-12-12T04:04:44.2545771" }, { "id": 32, "boss": "Mattie Grady", "name": "Racing Point", "birth": "2015-07-21T04:27:51.5214045" }, { "id": 34, "boss": "Jessie Little", "name": "Racing Point", "birth": "2012-01-04T03:11:08.244178" }, { "id": 40, "boss": "Felix Stark", "name": "Racing Point", "birth": "2012-03-16T01:33:34.0205275" }, { "id": 47, "boss": "Thomas Pfeffer", "name": "Racing Point", "birth": "2001-11-15T20:49:13.4911698" }, { "id": 49, "boss": "Roy Bins", "name": "Racing Point", "birth": "2008-06-22T04:58:12.8259098" }, { "id": 7, "boss": "Sadie Kirlin", "name": "Red Bull Racing", "birth": "2017-02-26T11:01:46.5001181" }, { "id": 10, "boss": "Matt Kulas", "name": "Red Bull Racing", "birth": "2000-01-28T11:19:19.2707108" }, { "id": 15, "boss": "Alexandra Mueller", "name": "Red Bull Racing", "birth": "1994-10-11T01:25:56.8647692" }, { "id": 18, "boss": "Beverly Donnelly", "name": "Red Bull Racing", "birth": "2003-06-19T22:17:44.6643356" }, { "id": 26, "boss": "Casey Ritchie", "name": "Red Bull Racing", "birth": "2006-12-27T14:35:31.3283286" }]
            }
        });

</script>

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

10 Jul 2020, 15:06

I've replicated the problem and created a ticket;

arthur_greve
Posts: 3
Joined: 09 Jul 2020, 18:16

10 Jul 2020, 16:10

Thanks for replying so quickly.
Just to set my expectations, can you give an estimation time for this fix?

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

13 Jul 2020, 09:19

It is already available on npm, please try with PrimeVue 2.0.2.

arthur_greve
Posts: 3
Joined: 09 Jul 2020, 18:16

14 Jul 2020, 21:39

Thanks, it worked perfectly.

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

18 Jul 2020, 14:02

Glad to hear!

Post Reply

Return to “PrimeVue”

  • Information