caoc-react-lib
Library for Modal and headless UI datatable.
This library is in Work In Progress
, code or methods may change at any time.
Install
npm install --save caoc-react-lib
Usage
Modal
A modal is a component where you can add text or html inside.
It uses the ReactDom.createPortal to display the one above the other components
Modal create automaticaly portal to display him.
import { Modal } from 'caoc-react-lib'
import React, {useState} from 'React'
const App = () => {
const [openModal, setOpenModal] = useState(false)
return (
<>
<h1>My Beautiful Page</h1>
<button onClick={() => setOpenModal(true)}>Open Modal</button>
{
/**
* @prop isOpen - a boolean that determines whether the modal is open or not
* @prop handleClose - This is a function that will close the modal with close button on modal or escape key
*/
}
<Modal isOpen={open} handleClose={() => setOpen(false)}>
I'm Modal box
<button onClick={() => setOpenModal(false)}>close me</button>
</Modal>
</>
)
}
Datatable
useTable
is a main hook to generate headless datatable.
To use it, pass it two default options :
-
columns
is array of title and accesors of data -
data
is our array of data
useTable
displays whatever data you pass to it - if you have 1000 data it will display them all. I have not yet implemented the lazy load of data. But you can useusePagination
right now.
Exemple :
import React, { useMemo } from 'React'
import { useTable } from 'caoc-react-lib'
const App = () => {
const data = [
{
firstName: 'Hortense',
lastName: 'Olson',
dateOfBirth: '1958-10-09T03:14:24.203Z',
startDate: '2022-02-04T22:35:58.891Z',
department: 'District Identity Producer',
street: '01593 Rosamond Spring',
city: 'Wilson',
state: 'Director',
zipCode: '64172-9528'
}
//...
]
const columns = useMemo(
() => [
{
title: 'Peoples',
columns: [
{
title: 'First Name',
accessor: 'firstName'
},
{
title: 'lastName',
accessor: 'lastName'
},
{
title: 'Birthdate',
accessor: 'dateOfBirth'
},
]
}
],
[]
)
const {
tableHeaders,
rows,
} = useTable({ columns, data })
return (
<table>
<thead>
{tableHeaders.map((headerGroups: DatatableHeaderGroups) => (
<tr {...headerGroups.tableHeaderGroupsProps()}>
{headerGroups.headers.map((column: DatatableHeader) => (
<th {...column.tableHeaderProps(column.sortColumnProps)}>
{column.render('title')}
</th>
))}
</tr>
))}
</thead>
<tbody>
{rows?.map((row: any) => (
<tr {...row.getRowProps()}>
{row.cells.map((cell: any) => (
<td
{...cell.getCellProps()}
style={{
border: '1px solid black',
margin: '0',
padding: '0.5rem'
}}
>
{cell.render()}
</td>
))}
</tr>
)) || []}
</tbody>
</table>
)
}
Hooks
There are 3 hooks available: useSort, useSearch, usePagination.
You can use them at the same time or only the one you need.
You can add hooks inside useTable
like this.
const {
tableHeaders,
rows,
goToNextPage,
goToPreviousPage,
currentPage,
matrix,
goToPage,
updateLimit,
limit,
limitArray,
searchTherm
} = useTable({columns, data}, useSort, useSearch, usePagination)
UseSort
useSort
is hook to implement row sorting.
To use it, add hook inside useTable
.
This hook add click event on each sortable table header and sort ASC|DESC
corresponding column.
Exemple :
import React, { useMemo } from 'React'
import {
useSort,
useTable } from 'caoc-react-lib'
const App = () => {
const data = [/*...some data */]
const columns = useMemo(
() => [/*...some column */]],
[]
)
const {
tableHeaders,
rows,
} = useTable({ columns, data: employees }, useSort)
return (
<table>
<thead>
{tableHeaders.map((headerGroups: DatatableHeaderGroups) => (
<tr {...headerGroups.tableHeaderGroupsProps()}>
{headerGroups.headers.map((column: DatatableHeader) => (
<th {...column.tableHeaderProps(column.sortColumnProps)}>
{column.render('title')}
</th>
<span>{column.canSort ? '🔼🔽' : ''}</span>
))}
</tr>
))}
</thead>
<tbody>
{/* ... */}
</tbody>
</table>
)
}
useSearch
useSearch
is hook to implement search.
To use it, add hook inside useTable
.
Create element or component (can type inside BTW) and add searchTherm
method in event listening.
import React, { useMemo } from 'React'
import {
useSearch,
useTable } from 'caoc-react-lib'
const App = () => {
const data = [/*...some data */]
const columns = useMemo(
() => [/*...some column */]],
[]
)
const {
tableHeaders,
rows,
handleSearch
} = useTable({ columns, data: employees }, useSearch)
return (
<>
<input type='text' onChange={handleSearch} />
<table>
<thead>
{tableHeaders.map((headerGroups: DatatableHeaderGroups) => (
<tr {...headerGroups.tableHeaderGroupsProps()}>
{headerGroups.headers.map((column: DatatableHeader) => (
<th {...column.tableHeaderProps(column.sortColumnProps)}>
{column.render('title')}
</th>
))}
</tr>
))}
</thead>
<tbody>
{/* ... */}
</tbody>
</table>
</>
)
}
usePagination
usePagination
is hook to implement pagination and limit of data displayed.
To use it, add hook inside useTable
.
Create elements or component allow you to add some event to navigate in datable.
Exemple :
import React, { useMemo } from 'React'
import {
useSearch,
useTable } from 'caoc-react-lib'
const App = () => {
const data = [/*...some data */]
const columns = useMemo(
() => [/*...some column */]],
[]
)
/**
* @const matrix - contains all pages.
* @const currentPage - get current page displayed.
* @method goToNextPage - go to next page of matrix.
* @method goToPreviousPage - go to previous page of matrix.
* @method goToPage(pageNumber) - go to specific page.
* @const limit - limit of data display.
* @const limitArray - Default limits you can chooses to display our data.
* @method updateLimit(limitNumber) - update limit of data displayed.
*/
const {
/* ... */
matrix,
currentPage,
goToNextPage,
goToPreviousPage,
goToPage,
limit,
limitArray
updateLimit,
} = useTable({ columns, data: employees }, usePagination)
return (
<>
<div>
<button onClick={goToPreviousPage} disabled={currentPage <= 0}>
previous
</button>
<button
onClick={goToNextPage}
disabled={currentPage >= matrix.length - 1}
>
next
</button>
<select
onChange={({ target }) => updateLimit(parseInt(target.value))}
value={limit}
>
{limitArray.map((l: number) => (
<option key={`limit_select_${l}`} value={l}>
{l}
</option>
))}
</select>
<div>
go to
<select
onChange={({ target }) => goToPage(parseInt(target.value))}
>
{Array(matrix.length)
.fill('')
.map((_, i) => (
<option
selected={currentPage === i}
key={`select_page_${i}`}
value={i}
>
{i + 1}
</option>
))}
</select>
page
</div>
</div>
<table>
{/* ...DATATABLE Element */}
</table>
</>
)
}
License
MIT © AllanCerveaux