JavaScript - Material-React-Table con Paginación y TopToolbar fija

// Obtener la tabla y las barras de paginación y herramientas

var table = document.getElementById("miTabla");

var pagination = document.getElementById("pagination");

var toolbar = document.getElementById("toolbar");

// Obtener el ancho de la tabla y las barras

var tableWidth = table.offsetWidth;

var paginationWidth = pagination.offsetWidth;

var toolbarWidth = toolbar.offsetWidth;

// Fijar el ancho de la tabla

table.style.width = (tableWidth - paginationWidth - toolbarWidth) + "px";

// Fijar la posición de las barras

pagination.style.position = "absolute";

pagination.style.left = "0";

toolbar.style.position = "absolute";

toolbar.style.left = "0";

<ThemeProvider theme={mrtTheme} >

          <MaterialReactTable

            {...mrtTheme.MRT.defaultProps}

            autoResetPageIndex={false}

            columns={[

            ..........

import React from 'react';

import { TableContainer, Table, TablePagination, Toolbar } from '@mui/material';

const YourComponent = () => {

  return (

    <TableContainer>

      <Table>

        {/* Contenido de la tabla */}

      </Table>

      <TablePagination

        // Propiedades de paginación

      />

      <Toolbar>

        {/* Contenido de la TopToolbar */}

      </Toolbar>

    </TableContainer>

  );

};

export default YourComponent;

.MuiTablePagination-root,

.MuiToolbar-root {

  position: sticky;

  top: 0;

  background-color: #fff; /* Ajusta el color de fondo según tus necesidades */

  z-index: 1; /* Asegura que los elementos se superpongan correctamente */

}