feat(DatasetFiles): add pagination to the table

Author: MellyGray

package-lock.json

@@ -30,6 +30,7 @@
     "react-bootstrap": "^2.7.2",
     "react-bootstrap-icons": "^1.10.3",
     "react-i18next": "^12.1.5",
+    "react-loader-spinner": "^5.3.4",
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.8.1",
     "react-topbar-progress-indicator": "^4.1.1",

package.json

@@ -82,6 +82,8 @@ $breadcrumb-divider: ">";
 // Alert
 @import "bootstrap/scss/alert";
 
+// Pagination
+@import "bootstrap/scss/pagination";
 
 // Navbar
 

packages/design-system/src/lib/components/assets/styles/bootstrap-customized.scss

@@ -12,10 +12,10 @@ type ColSpec =
 
 export interface ColProps extends React.HTMLAttributes<HTMLElement> {
   children: ReactNode
-  xs?: ColSpec
-  sm?: ColSpec
-  md?: ColSpec
-  lg?: ColSpec
+  xs?: ColSpec | 'auto'
+  sm?: ColSpec | 'auto'
+  md?: ColSpec | 'auto'
+  lg?: ColSpec | 'auto'
 }
 
 export function Col({ children, ...props }: ColProps) {

packages/design-system/src/lib/components/grid/Col.tsx

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react'
+import { Pagination as PaginationBS } from 'react-bootstrap'
+import { PaginationFirst } from './PaginationFirst'
+import { PaginationPrev } from './PaginationPrev'
+import { PaginationEllipsis } from './PaginationEllipsis'
+import { PaginationNext } from './PaginationNext'
+import { PaginationLast } from './PaginationLast'
+import { PaginationItem } from './PaginationItem'
+
+function Pagination({ children }: PropsWithChildren) {
+  return <PaginationBS>{children}</PaginationBS>
+}
+
+Pagination.First = PaginationFirst
+Pagination.Prev = PaginationPrev
+Pagination.Ellipsis = PaginationEllipsis
+Pagination.Next = PaginationNext
+Pagination.Last = PaginationLast
+Pagination.Item = PaginationItem
+
+export { Pagination }

packages/design-system/src/lib/components/pagination/Pagination.tsx

@@ -0,0 +1,5 @@
+import { Pagination } from 'react-bootstrap'
+
+export function PaginationEllipsis() {
+  return <Pagination.Ellipsis />
+}

packages/design-system/src/lib/components/pagination/PaginationEllipsis.tsx

@@ -0,0 +1,9 @@
+import { Pagination } from 'react-bootstrap'
+
+interface PaginationFirstProps {
+  onClick: () => void
+  disabled: boolean
+}
+export function PaginationFirst({ onClick, disabled }: PaginationFirstProps) {
+  return <Pagination.First onClick={onClick} disabled={disabled} />
+}

packages/design-system/src/lib/components/pagination/PaginationFirst.tsx

@@ -0,0 +1,15 @@
+import { Pagination } from 'react-bootstrap'
+
+interface PaginationItemProps {
+  pageNumber: number
+  onClick?: () => void
+  disabled?: boolean
+  active?: boolean
+}
+export function PaginationItem({ pageNumber, onClick, disabled, active }: PaginationItemProps) {
+  return (
+    <Pagination.Item onClick={onClick} disabled={disabled} active={active}>
+      {pageNumber}
+    </Pagination.Item>
+  )
+}

packages/design-system/src/lib/components/pagination/PaginationItem.tsx

@@ -0,0 +1,9 @@
+import { Pagination } from 'react-bootstrap'
+
+interface PaginationLastProps {
+  onClick: () => void
+  disabled: boolean
+}
+export function PaginationLast({ onClick, disabled }: PaginationLastProps) {
+  return <Pagination.Last onClick={onClick} disabled={disabled} />
+}

packages/design-system/src/lib/components/pagination/PaginationLast.tsx

@@ -0,0 +1,9 @@
+import { Pagination } from 'react-bootstrap'
+
+interface PaginationNextProps {
+  onClick: () => void
+  disabled: boolean
+}
+export function PaginationNext({ onClick, disabled }: PaginationNextProps) {
+  return <Pagination.Next onClick={onClick} disabled={disabled} />
+}