feat: create TableFooter and TablePagination

Author: Karine Brandelli Padilha

jest.config.js

@@ -9,7 +9,8 @@ module.exports = {
         '!<rootDir>/src/core/feedback/dialog-v2/index.ts',
         '!<rootDir>/src/core/navigation/breadcrumbs/index.tsx',
         '!<rootDir>/src/core/inputs/select/index.tsx',
-        '!<rootDir>/src/core/inputs/date-time/index.tsx'
+        '!<rootDir>/src/core/inputs/date-time/index.tsx',
+        '!<rootDir>/src/core/data-display/table/table-pagination.tsx'
     ],
     transform: {
         '.+\\.(ts|tsx)$': 'ts-jest'

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.34.2",
+    "version": "0.34.3",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",

src/core/data-display/table/table-footer.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import MuiTableFooter from '@mui/material/TableFooter'
+import type { DefaultProps } from '../../types'
+import type { TableFooterProps } from '@mui/material/TableFooter'
+import { theme } from '@/theme'
+
+const { grays } = theme.colors
+
+export interface ITableFooterProps extends DefaultProps, TableFooterProps {}
+
+const TableFooter = ({
+    style,
+    margin,
+    padding,
+    children
+}: ITableFooterProps) => (
+    <MuiTableFooter
+        style={{
+            borderColor: grays.g7,
+            margin,
+            padding,
+            ...style
+        }}>
+        {children}
+    </MuiTableFooter>
+)
+
+export default TableFooter

src/core/data-display/table/table-pagination.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import type { ChangeEvent, CSSProperties, MouseEvent } from 'react'
+import MuiTablePagination from '@mui/material/TablePagination'
+import type { TablePaginationProps } from '@mui/material/TablePagination'
+import { theme } from '@/theme'
+
+const { grays } = theme.colors
+
+interface ITablePaginationProps
+    extends Omit<
+        TablePaginationProps,
+        | 'component'
+        | 'count'
+        | 'page'
+        | 'rowsPerPage'
+        | 'onPageChange'
+        | 'onRowsPerPageChange'
+    > {
+    count: number
+    page: number
+    rowsPerPage: number
+    rowsPerPageOptions?: number[]
+    onPageChange: (
+        event: MouseEvent<HTMLButtonElement> | null,
+        page: number
+    ) => void
+    onRowsPerPageChange: (
+        event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => void
+    style?: CSSProperties
+}
+
+const TablePagination = ({
+    count,
+    page,
+    rowsPerPage,
+    rowsPerPageOptions,
+    onPageChange,
+    onRowsPerPageChange,
+    style,
+    padding,
+    ...props
+}: ITablePaginationProps) => {
+    return (
+        <MuiTablePagination
+            count={count}
+            page={page}
+            rowsPerPage={rowsPerPage}
+            rowsPerPageOptions={
+                rowsPerPageOptions ? rowsPerPageOptions : [5, 10, 25]
+            }
+            labelRowsPerPage='Linhas por página:'
+            labelDisplayedRows={({ from, to, count }) => {
+                return `${from}-${to} de ${count !== -1 ? count : `mais que ${to}`}`
+            }}
+            style={{
+                borderColor: grays.g7,
+                padding,
+                ...style
+            }}
+            sx={{
+                borderBottom: `1px solid ${grays.g7} !important;`
+            }}
+            onPageChange={onPageChange}
+            onRowsPerPageChange={onRowsPerPageChange}
+            {...props}
+        />
+    )
+}
+
+export default TablePagination

src/core/data-display/table/table.spec.tsx

@@ -1,9 +1,11 @@
-import React, { act } from 'react'
-import { render, waitFor } from '@testing-library/react'
+import React, { act, useState } from 'react'
+import { fireEvent, render, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import TableBody from './table-body'
 import TableCell from './table-cell'
+import TableFooter from './table-footer'
 import TableHead from './table-head'
+import TablePagination from './table-pagination'
 import TableRow from './table-row'
 import Table from '.'
 import '@testing-library/jest-dom'
@@ -14,6 +16,9 @@ interface IProps {
 }
 
 const Default = ({ onSort, color }: IProps) => {
+    const [page, setPage] = useState(0)
+    const [rowsPerPage, setRowsPerPage] = useState(2)
+
     return (
         <Table>
             <TableHead color={color} onSort={onSort ? onSort : undefined}>
@@ -31,7 +36,32 @@ const Default = ({ onSort, color }: IProps) => {
                     <TableCell>Table-Row-Name-2</TableCell>
                     <TableCell>Table-Row-Name-Email-2</TableCell>
                 </TableRow>
+                <TableRow>
+                    <TableCell>Table-Row-Name-3</TableCell>
+                    <TableCell>Table-Row-Name-Email-3</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Table-Row-Name-4</TableCell>
+                    <TableCell>Table-Row-Name-Email-4</TableCell>
+                </TableRow>
             </TableBody>
+            <TableFooter>
+                <TableRow>
+                    <TablePagination
+                        page={page}
+                        rowsPerPage={rowsPerPage}
+                        count={4}
+                        rowsPerPageOptions={[1, 2, 4]}
+                        onPageChange={(_, page: number) => {
+                            setPage(page)
+                        }}
+                        onRowsPerPageChange={event => {
+                            setRowsPerPage(parseInt(event.target.value, 10))
+                            setPage(0)
+                        }}
+                    />
+                </TableRow>
+            </TableFooter>
         </Table>
     )
 }
@@ -88,4 +118,48 @@ describe('Table', () => {
             expect(headerStyle.backgroundColor).toBe('blue')
         })
     })
+
+    it('should render footer', () => {
+        const { container } = render(<Default color='blue' />)
+
+        const footer = container.querySelector(
+            '.MuiTableFooter-root'
+        ) as HTMLTableCellElement
+
+        waitFor(() => {
+            expect(footer).toBeInTheDocument()
+        })
+    })
+
+    it('should change page when next page button is clicked', () => {
+        const { getByText, getByLabelText } = render(<Default />)
+
+        const pageDisplay = getByText('1-2 de 4')
+
+        expect(pageDisplay).toBeInTheDocument()
+
+        const nextPageButton = getByLabelText('Go to next page')
+
+        fireEvent.click(nextPageButton)
+
+        expect(getByText('3-4 de 4')).toBeInTheDocument()
+    })
+
+    it('should change rows per page', () => {
+        const { getByRole, getAllByRole } = render(<Default />)
+
+        const combobox = getByRole('combobox')
+
+        fireEvent.mouseDown(combobox)
+
+        const option = getByRole('option', { name: '4' })
+
+        fireEvent.click(option)
+
+        expect(combobox).toHaveTextContent('4')
+
+        const rowsAfter = getAllByRole('rowgroup')[1].childElementCount
+
+        expect(rowsAfter).toBe(4)
+    })
 })

src/index.ts

@@ -21,6 +21,8 @@ export { default as TableBody } from './core/data-display/table/table-body'
 export { default as TableCell } from './core/data-display/table/table-cell'
 export { default as TableHead } from './core/data-display/table/table-head'
 export { default as TableRow } from './core/data-display/table/table-row'
+export { default as TableFooter } from './core/data-display/table/table-footer'
+export { default as TablePagination } from './core/data-display/table/table-pagination'
 export { default as Typography } from './core/data-display/typography'
 
 export { default as Collapse } from './core/feedback/collapse'