enter image description here

After I fetch the data from database and display it, how to I make it only show 4 columns 2 rows and a nagivation to show other data.

CodePudding user response：

First you have to implement pagination for showing 8 items per page. And should set the display property of panel style to grid. Reference this Specifying the columns in a grid

{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

CodePudding user response：

To show data in a grid with a fixed number of columns and rows, you can use CSS grid layout. Here's an example of how you can create a grid with 4 columns and 2 rows using CSS:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

You can then use this CSS class on a container element that holds the data you want to display in a grid. For example, if you have an array of data that you want to display in the grid, you can use a map function to create a grid of elements from that data:

const data = [
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
  { id: 3, name: "Item 3" },
  { id: 4, name: "Item 4" },
  { id: 5, name: "Item 5" },
  { id: 6, name: "Item 6" },
];

function App() {
  return (
    <div className="grid">
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

This will create a grid with 4 columns and 2 rows, and each item in the data array will be displayed in one of the grid cells.

To add navigation to show more data, you can use pagination. This involves splitting the data into smaller chunks and displaying only one chunk at a time. You can then add buttons or links that allow the user to navigate between the different chunks of data.

Here's an example of how you can implement pagination in your React app:

function App() {
  const [currentPage, setCurrentPage] = useState(1); // Keep track of the current page
  const itemsPerPage = 4; // The number of items to display per page

  // Use the currentPage and itemsPerPage to get the slice of data to display
  const currentItems = data.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  return (
    <div>
      {/* Display the grid of items for the current page */}
      <div className="grid">
        {currentItems.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>

      {/* Add buttons to navigate between pages */}
      <div>
        {currentPage > 1 && (
          <button onClick={() => setCurrentPage(currentPage - 1)}>
            Previous
          </button>
        )}
        {currentPage < data.length / itemsPerPage && (
          <button onClick={() => setCurrentPage(currentPage   1)}>
            Next
          </button>
        )}
      </div>
    </div>
  );
}

In this example, the currentPage state variable is used to keep track of the current page, and the setCurrentPage function is used to update the current page when the user clicks on the "Previous"