CODEWITHSUNDEEP
reactjsfullscreenmaterial-react-table
Hamza Qadir
Hamza Qadir

Reputation: 1

How to customize MaterialReactTable Toggle Full Screen width and height?

I have doing my project and use MaterialReactTable. There are features in it. Toggle Full Screen is also in it where all table show in full screen. I also have my website Header. I want to show Header also when Table is in full screen. Means above there is my Header component and then below Table full screen shows.

I am try to find my problem. I am expecting that some have work on this issue.

Upvotes: 0

Views: 421

Answers (1)

Dakshesh Baldaniya
Dakshesh Baldaniya

Reputation: 266

To display the Header component above the MaterialReactTable in full-screen mode, you can follow these steps:

Create a new component that includes both the Header and the MaterialReactTable in full-screen mode. Set the position of the Header to fixed, so it stays in place when scrolling. Adjust the margin or padding of the table to avoid overlapping with the Header. Here's an example of how you can implement this:

import React from 'react';
import { MaterialReactTable } from 'material-react-table';
import Header from './Header'; // Import your Header component

const FullScreenTable = () => {
  // Your table configuration
  const tableData = [];
  const tableColumns = [];

  return (
    <div style={{ position: 'relative' }}>
      <Header /> {/* Render the Header component */}
      <MaterialReactTable
        data={tableData}
        columns={tableColumns}
        enableFullScreen={true} // Enable full-screen mode
        muiTableHeadCellProps={{
          style: {
            fontWeight: 'bold',
            backgroundColor: '#f5f5f5',
          },
        }}
        muiTableBodyCellProps={{
          style: {
            borderBottom: '1px solid #ddd',
            padding: '12px',
          },
        }}
        muiTableContainerProps={{
          style: {
            marginTop: '64px', // Adjust the margin to avoid overlapping with the Header
          },
        }}
        muiTableProps={{
          style: {
            borderRadius: '0',
          },
        }}
        muiTableHeadProps={{
          style: {
            borderRadius: '0',
          },
        }}
        muiTableBodyProps={{
          style: {
            borderRadius: '0',
          },
        }}
      />
    </div>
  );
};

export default FullScreenTable;

In this example, the Header component is rendered first, and the MaterialReactTable is wrapped in a div with a relative position. The table's margin top is adjusted to avoid overlapping with the Header

Upvotes: -1

Related Questions