Cambiare la paginazione in material-table e React

Mattepuffo's logo
Cambiare la paginazione in material-table e React

Cambiare la paginazione in material-table e React

Sto creando un sito con React e Material UI, ed ho scoperto material-table.

Praticamente è una datatble per Material UI completo praticamente di tutto.

Anche la documentazione è ben fatta; l'unico esempio che non ho trovato riguarda la paginazione.

E questo perchè in verità è molto facile cambiarla.

Qui sotto la mia tabella in cui ho modificato il numero di records visibile di default (da 5 a 20), e il range di records:

        <MaterialTable
            title="Books"
            options={{
                headerStyle: {
                    backgroundColor: '#000',
                    color: '#FFF'
                },
                actionsColumnIndex: -1,
                pageSize: 20,
                pageSizeOptions: [10, 50, 100, state.data.length]
            }}
            columns={state.columns}
            data={state.data}
        />

Vi ho riportato solo il componente MaterialTable, tralasciando il resto.

Per lo scopo ci interessano le opzioni pageSize e pageSizeOptions; come vedete ho messo come ultimo elemento la dimensione dei dati che riempie la tabella.

Enjoy!


Condividi

Commentami!