First Last button in MUI X Data grid

ONLINECAST

2 min read

·

05-10-2024

10

0

Share

Mastering Navigation in MUI X Data Grid: The First and Last Button

The MUI X Data Grid is a powerful tool for displaying and managing data in your React applications. But what if you need to quickly jump to the beginning or end of your dataset? Enter the "First" and "Last" buttons, invaluable navigation tools that streamline user experience and enhance data exploration.

Scenario: Navigating Through Extensive Datasets

Imagine you're working with a data grid displaying thousands of records. Scrolling through page after page to reach the first or last entry can be tedious and frustrating. This is where the "First" and "Last" buttons come in.

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'firstName', headerName: 'First name', width: 130 },
  { field: 'lastName', headerName: 'Last name', width: 130 },
  { field: 'age', headerName: 'Age', type: 'number', width: 90 },
];

const rows = [
  // ... your data rows here
];

export default function App() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        // ... other DataGrid props
      />
    </div>
  );
}

Understanding the Power of First and Last Buttons

The "First" and "Last" buttons, when integrated into your MUI X Data Grid, provide a direct path to the beginning or end of your dataset. This simplifies navigation, especially when dealing with large data sets.

• Effortless Access: Users can instantly navigate to the first or last row with a single click, eliminating the need for extensive scrolling.
• Improved User Experience: The intuitive nature of these buttons contributes to a smoother and more efficient user experience, enhancing data exploration.
• Increased Data Visibility: These navigation tools enable users to quickly reach specific data points, providing a comprehensive view of the entire dataset.

Implementing "First" and "Last" Buttons in MUI X Data Grid

You can readily integrate "First" and "Last" buttons within your MUI X Data Grid using the Pagination component. Here's a breakdown of how to achieve this:

1. Import the Pagination Component: Begin by importing the necessary component:

   import { Pagination } from '@mui/x-data-grid';
   

2. Enable Pagination: Ensure pagination is enabled in your DataGrid configuration:

   <DataGrid
     rows={rows}
     columns={columns}
     pagination
     // ... other DataGrid props
   />
   

3. Customize the Pagination Bar: Utilize the pagination props to control the appearance and functionality of the pagination bar. This includes options like:

   <DataGrid
     rows={rows}
     columns={columns}
     pagination
     paginationMode="server"
     pageSizeOptions={[5, 10, 25, 50, 100]}
     rowsPerPageOptions={[5, 10, 25, 50, 100]}
     // ... other DataGrid props
   />
   

4. Add Custom Buttons: MUI X Data Grid allows you to customize the pagination bar by adding custom buttons.

   <DataGrid
     rows={rows}
     columns={columns}
     pagination
     paginationMode="server"
     pageSizeOptions={[5, 10, 25, 50, 100]}
     rowsPerPageOptions={[5, 10, 25, 50, 100]}
     components={{
       Pagination: props => (
         <Pagination {...props} 
           showFirstButton
           showLastButton
           labelDisplayedRows={({ page }) => `Page ${page + 1} of ${Math.ceil(rows.length / props.pageSize)}`}
         />
       )
     }} 
     // ... other DataGrid props
   />
   

By adding showFirstButton and showLastButton props within the Pagination component, you enable the "First" and "Last" buttons, providing users with direct access to the beginning and end of the dataset.

Conclusion

The "First" and "Last" buttons are indispensable for enhancing the user experience within MUI X Data Grid, especially when handling extensive datasets. By seamlessly integrating these navigational tools, you empower users to navigate through data with ease and efficiency, leading to a more intuitive and productive interaction with your application.