Vue-material: md-table-pagination and md-size - how to use

[sergey-koretsky]

Hi. it seems to me that md-size prop of md-table-pagination doesn't affect rows amount in md-table.

i.e: i have 20 rows to be displayed in md-table

data() {
    return {
      rows: [
        {id: 1, name: "Record #1 name", isEnabled: true},
        {id: 2, name: "Record #2 name", isEnabled: false},
        // ...
        {id: 20, name: "Record #20 name", isEnabled: true},
      ]
    }
}

then i create md-table like this:

<md-table-card>
    <md-toolbar>
        <h2 class="md-title">Records list</h2>
        <md-button class="md-icon-button">
            <md-icon>add_circle_outline</md-icon>
        </md-button>
        <md-button class="md-icon-button">
            <md-icon>edit_circle_outline</md-icon>
        </md-button>
        <md-button class="md-icon-button">
            <md-icon>delete</md-icon>
        </md-button>
    </md-toolbar>

    <md-table md-sort="id" md-sort-type="desc" @sort="onSort">
        <md-table-header>
            <md-table-row>
                <md-table-head md-sort-by="id"><md-icon>format_list_numbered</md-icon><span>ID</span></md-table-head>
                <md-table-head md-sort-by="name">Record name</md-table-head>
                <md-table-head md-sort-by="isEnabled">Is Enabled</md-table-head>
            </md-table-row>
        </md-table-header>

        <md-table-body>
            <md-table-row v-for="(row, rowIndex) in rows" :key="rowIndex" :md-item="row">
                <md-table-cell md-numeric>{{row.id}}</md-table-cell>
                <md-table-cell>{{row.name}}</md-table-cell>
                <md-table-cell><md-switch v-model="row.isEnabled"></md-switch></md-table-cell>
            </md-table-row>
        </md-table-body>
    </md-table>

    <md-table-pagination
        :md-size="5"
        :md-total="rows.length"
        md-page="1"
        :md-page-options="[5, 10, 25, 50]"
        @pagination="onPagination">
    </md-table-pagination>

</md-table-card>

But the amount of rows in the table is equal to all rows in data().
And if i change the "size" in pager it willn't affect displayed rows amount.

[marcosmoura]

The should be done manually. The md-table only fire events when the user interacts with the table itself.

Why? Because I can't threat your data. Your data may have a lot of different formats. So you should create (maybe on your backend side) a pagination logic to update the v-for variable with the new page settings (in your case the rows variable.

Thank you.

[jdrake3]

The point is, I think, that if I have 6 rows in my data, and size is set to 5 I shouldn't see 6 pages of data, I should see 2. You know the total, and you know the size, so do the division.

[Samuell1]

@jdrake3 you can change pagination size with simple if