Componente de tablas con paginación para Chakra-UI V2
npm install table-pagination-chakra-ui
pageSize : {Number} - Es la cantidad de ítems que se van a ver por página
setPageSize: {Function} - Setter de pageSize
pageIndex: {Number} - Es el índice en el cual nos encontramos dentro de la paginación de la tabla
setPageIndex: {Function} - Setter de pageIndex
totalItemsCount: {Number} - Es el largo del array de datos que se va a mostrar en la tabla
pageSizeOptions: {Array.Number} - Son las opciones de cantidades de ítems que se pueden mostrar por página. - Default = [10,25,50]
colorScheme: Color de la paginación - Default = "teal"
showOptions: {Boolean} - Muestra las opciones - Default = true
labelOptions: {String} - Etiqueta de opciones - Default = "Ítems mostrados"
showQuantity: {Boolean} - Muestra cantidad - Default = true
import {PaginationTable} from "table-pagination-chakra-ui"
const your_function = () => {
return (
<>
{/*tu código aquí*/}
<PaginationTable
pageSize={pageSize}
setPageSize={setPageSize}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
totalItemsCount={data.length}
pageSizeOptions={[10, 25, 50]}
/>
</>
)
}import {PaginationTable} from "table-pagination-chakra-ui"
import {
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableContainer,
} from "@chakra-ui/react";
const Table = () => {
const [pageIndex, setPageIndex] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
return (<TableContainer>
<Table variant="striped" size="sm">
<Thead>
<Tr>
<Th>
Nombre
<Th>
Apellido
</Th>
</Tr>
</Thead>
<Tbody>
{data
.map((item) => {
return (
<Tr key={item._id}>
<Td>{item.firstName}</Td>
<Td>{item.lastName}</Td>
</Tr>
);
})
.slice(pageSize * pageIndex, pageSize * (pageIndex + 1))
}
</Tbody>
</Table>
<PaginationTable
pageSize={pageSize}
setPageSize={setPageSize}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
totalItemsCount={data.length}
pageSizeOptions={[10, 25, 50]}
/>
</TableContainer>)
}https://alepiumetti.github.io/chakra-ui-table-w-pagination-sort-search/
¡Damos la bienvenida a las contribuciones a este proyecto! Para comenzar, sigue estos pasos:
-
Haz un fork del repositorio: Haz clic en el botón "Fork" en la parte superior derecha de esta página para crear una copia de este repositorio en tu cuenta de GitHub.
-
Clona tu fork: Usa el siguiente comando para clonar tu repositorio bifurcado en tu máquina local.
git clone https://github.com/tu-usuario/chakra-ui-table-w-pagination-sort-search.git- Crea una nueva rama: Crea una nueva rama para tu característica o corrección de errores.
git checkout -b mi-rama-de-característica-
Haz tus cambios: Implementa tu característica o corrige el error.
-
Confirma tus cambios: Confirma tus cambios con un mensaje descriptivo.
git commit -m "Descripción de la característica o corrección"- Empuja a tu fork: Empuja tus cambios a tu repositorio bifurcado.
git push origin mi-rama-de-característica- Crea un pull request: Ve al repositorio original y crea un pull request desde tu repositorio bifurcado. Proporciona una descripción clara de tus cambios y por qué deberían fusionarse.
Revisaremos tu pull request y proporcionaremos comentarios. ¡Gracias por contribuir!