Material-Table 中的自定義分頁

Question

我想覆蓋 Material-Table 中的默認分頁以使其看起來不同，但保留相同的默認元素。 我的覆蓋允許我在表格中的頁面之間移動，但我無法更改表格中出現的行數。 我也不能跳到最后一頁或第一頁。 我想保留與默認選項完全相同的選項，但要更改它們的外觀。

我所有的圖標、網格、排版等，導入都是@material-ui/core/或@material-ui/icons/

    function IntakeList() {
        const CustomPaginationComponent = (props) => {
            const { page, rowsPerPage, count, onChangePage } = props;
            let from = rowsPerPage * page + 1;
            let to = rowsPerPage * (page + 1);
            if (to > count) {
                to = count;
            }
            return (
                <td>
                    <Grid container alignItems="center" style={{ paddingTop: 8 }}>
                        <Grid item>
                            <IconButton disabled={page === 0} onClick={(e) => onChangePage(e, page - 1)}>
                                <SkipPreviousIcon fontSize="small" color={page === 0 ? "disabled" : "primary"} />
                                <Typography>Prev</Typography>
                            </IconButton>
                        </Grid>
                        <Grid item>
                            <Typography variant="caption" style={{ color: "black" }}>
                                {from}-{to} of {count}
                            </Typography>
                        </Grid>
                        <Grid item>
                            <IconButton disabled={to >= count} onClick={(e) => onChangePage(e, page + 1)}>
                                <Typography>Next</Typography>
                                <SkipNextIcon fontSize="small" color={to < count ? "primary" : "disabled"} />
                            </IconButton>
                        </Grid>
                    </Grid>
                </td>
            );
        };

        return (
            <MaterialTable
                title="Title"
                data={data}
                columns={columns}
                options={{
                    pageSize: 10,
                    pageSizeOptions: [10, 15, 25, 50, 100],
    
                }}
                components={{
                    Pagination: (props) => {
                       return <CustomPaginationComponent {...props} />;
                    },
                }}
            />
        );
    }

Answer 1

你到目前為止所做的都是對的。 您只需為“跳到最后一頁”、“跳到第一頁”和“選擇行選項”進行編碼，就像為“下一頁”和“上一頁”所做的一樣。

https://codesandbox.io/s/solution-q1cmer?file=/src/App.js

當你控制台記錄分頁的道具時，你會得到這個

使用rowsPerPageOptions 、 onChangeRowsPerPage和您編寫的一些代碼，我能夠編寫每頁的行數。

老實說，我認為您不必編寫next page和previous page功能的代碼。 它已經在道具中了。 您只需在正確的位置聲明它們。

快樂編碼