NEW FEATURE: Added default page size for tables

src/components/tables/CippTable.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useSelector } from 'react-redux'
 import { ExportCsvButton, ExportPDFButton } from 'src/components/buttons'
 import { CSpinner, CFormInput } from '@coreui/react'
 import DataTable, { createTheme } from 'react-data-table-component'
@@ -180,7 +181,7 @@ export default function CippTable({
  disableCSVExport,
  actions,
  ])
-
+ const tablePageSize = useSelector((state) => state.app.tablePageSize)
  return (
  <div className="ms-n3 me-n3 cipp-tablewrapper">
  {!isFetching && error && <span>Error loading data</span>}
@@ -209,7 +210,7 @@ export default function CippTable({
  defaultSortAsc
  defaultSortFieldId={1}
  sortFunction={customSort}
- paginationPerPage={25}
+ paginationPerPage={tablePageSize}
  progressPending={isFetching}
  progressComponent={<CSpinner color="info" component="div" />}
  paginationRowsPerPageOptions={[25, 50, 100, 200, 500]}

src/components/utilities/CippProfile.js

@@ -12,7 +12,7 @@ import {
 } from '@coreui/react'
 import avatar0 from 'src/assets/images/avatars/0.jpg'
 import { useLoadClientPrincipalQuery } from 'src/store/api/auth'
-import { ThemeSwitcher, UsageLocation } from 'src/components/utilities'
+import { ThemeSwitcher, UsageLocation, PageSizeSwitcher } from 'src/components/utilities'
 
 const CippProfile = () => {
  const { data: profile, isFetching, isLoading } = useLoadClientPrincipalQuery()
@@ -50,6 +50,9 @@ const CippProfile = () => {
  <CCol>
  <ThemeSwitcher />
  </CCol>
+ <CCol>
+ <PageSizeSwitcher />
+ </CCol>
  </CRow>
  <br></br>
  <CRow>

src/components/utilities/PageSizeSwitcher.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { CButtonGroup, CButton, CCard, CCardHeader } from '@coreui/react'
+import { useDispatch, useSelector } from 'react-redux'
+import { setCurrentPageSize } from 'src/store/features/app'
+
+const PageSizeSwitcher = () => {
+ const dispatch = useDispatch()
+ const pageSizes = useSelector((state) => state.app.pageSizes)
+ const currentTablePageSize = useSelector((state) => state.app.tablePageSize)
+
+ const SwitchPageSize = (t) => {
+ dispatch(setCurrentPageSize({ pageSize: t }))
+ }
+
+ return (
+ <CCard>
+ <CCardHeader>Select Default Page Size</CCardHeader>
+ <CButtonGroup role="group" aria-label="Page Size Switcher">
+ {pageSizes.map((t, index) => (
+ <CButton
+ onClick={() => SwitchPageSize(t)}
+ color={t === currentTablePageSize ? 'primary' : 'secondary'}
+ key={index}
+ >
+ {t}
+ </CButton>
+ ))}
+ </CButtonGroup>
+ </CCard>
+ )
+}
+
+export default PageSizeSwitcher

src/components/utilities/index.js

@@ -12,6 +12,7 @@ import StatusIcon from 'src/components/utilities/StatusIcon'
 import TenantSelector from 'src/components/utilities/TenantSelector'
 import TenantSelectorMultiple from 'src/components/utilities/TenantSelectorMultiple'
 import ThemeSwitcher from 'src/components/utilities/ThemeSwitcher'
+import PageSizeSwitcher from 'src/components/utilities/PageSizeSwitcher'
 import Toasts from 'src/components/utilities/Toasts'
 import UsageLocation from 'src/components/utilities/UsageLocation'
 
@@ -33,6 +34,7 @@ export {
  TenantSelector,
  TenantSelectorMultiple,
  ThemeSwitcher,
+ PageSizeSwitcher,
  Toasts,
  UsageLocation,
 }

src/store/features/app.js

@@ -8,6 +8,8 @@ const initialState = {
  currentTenant: {},
  themes: ['default', 'cyberdrain', 'impact'],
  currentTheme: 'default',
+ tablePageSize: 25,
+ pageSizes: [25, 50, 100, 200, 500],
 }
 
 export const appSlice = createSlice({
@@ -26,6 +28,9 @@ export const appSlice = createSlice({
  setCurrentTheme: (state, action) => {
  state.currentTheme = action.payload?.theme
  },
+ setCurrentPageSize: (state, action) => {
+ state.tablePageSize = action.payload?.pageSize
+ },
  setSidebarVisible: (state, action) => {
  state.sidebarShow = action.payload?.visible
  },
@@ -39,6 +44,7 @@ export const {
  toggleSidebarShow,
  toggleSidebarUnfoldable,
  setCurrentTenant,
+ setCurrentPageSize,
  setCurrentTheme,
  setSidebarVisible,
  setDefaultusageLocation,