@deepbag/react-grid-x/dist/themes/rgx-theme/rgx-arrow-pagination.css

ReactGridX is a customizable and flexible React table component that supports pagination, dynamic rendering of table data, and customizable column rendering. It provides an easy-to-use interface for displaying tabular data with configurable columns, pagin

/* Pagination container styling */
.rgx-theme .rgx-arrow-pagination {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Information section in pagination (like current page and total pages) */
.rgx-theme .rgx-arrow-pagination-info {
  font-size: 14px;
  font-weight: 500;
}

/* Page number display, including "Page x of y" format */
.rgx-theme .rgx-arrow-pagination-page-of {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  margin: 0 7px;
}

/* Row-per-page section styling */
.rgx-theme .rgx-arrow-pagination-row-per-page {
  display: flex;
  align-items: center;
}

.rgx-theme .rgx-arrow-pagination-rows-per-page-label {
  font-size: 14px;
  margin-right: 10px;
}

/* Styling for the select dropdown that controls rows per page */
.rgx-theme .rgx-arrow-pagination-rows-per-page-select {
  height: 30px;
  padding: 5px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

/* Disabled select dropdown style */
.rgx-theme .rgx-arrow-pagination-rows-per-page-select:disabled {
  cursor: not-allowed;
}

/* Rows-per-page label and select container */
.rgx-theme .rgx-arrow-pagination-rows-per-page {
  display: flex;
  align-items: center;
  margin-right: 10px;
  font-weight: 500;
}

/* Styling for the label inside the rows-per-page section */
.rgx-theme .rgx-theme.rgx-arrow-pagination-rows-per-page-label {
  font-size: 14px;
  color: #202020;
  margin-right: 10px;
}


/* Pagination button container for navigation buttons (Previous, Next, etc.) */
.rgx-theme .rgx-arrow-pagination-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Style for pagination buttons */
.rgx-theme .rgx-arrow-pagination-button {
  padding: 4.8px 5px 1.6px 5px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 14px;
  font-weight: 500;
}

/* Hover effect for pagination buttons */
.rgx-theme .rgx-arrow-pagination-button:hover {
  background-color: #ddd;
}

/* Style for disabled pagination buttons */
.rgx-theme .rgx-arrow-pagination-button:disabled {
  background-color: #eee;
  cursor: not-allowed;
}

/* Style for the active pagination button */
.rgx-theme .rgx-arrow-pagination-button.rgx-active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

/* Styling for the ellipsis (e.g., "..." for skipped page numbers) */
.rgx-theme .rgx-arrow-pagination-ellipsis {
  background-color: transparent;
  color: #888;
  cursor: not-allowed;
}