chakra-ui-table-w-pagination-sort-search | Spanish Version

Componente de tablas con paginación para Chakra-UI V2

English README

• chakra-ui-table-w-pagination-sort-search | Spanish Version
  • English README
• Comenzando
  • Instalación
    • Props
    • Importar y usar
  • Ejemplo
  • Demo
• Contribuir
  • Contribuir

Comenzando

Instalación

npm install table-pagination-chakra-ui

Módulo npm

Props

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

Importar y usar

1import {PaginationTable} from "table-pagination-chakra-ui"
2
3const your_function = () => {
4
5  return (
6    <>    
7        
8        {/*tu código aquí*/}
9        
10        <PaginationTable
11          pageSize={pageSize}
12          setPageSize={setPageSize}
13          pageIndex={pageIndex}
14          setPageIndex={setPageIndex}
15          totalItemsCount={data.length}
16          pageSizeOptions={[10, 25, 50]}
17        />
18    </>
19
20  )
21}

Ejemplo

1import {PaginationTable} from "table-pagination-chakra-ui"
2import {
3  Table,
4  Thead,
5  Tbody,
6  Tr,
7  Th,
8  Td,
9  TableContainer,
10} from "@chakra-ui/react";
11
12const Table = () => {
13
14  const [pageIndex, setPageIndex] = useState(0);
15  const [pageSize, setPageSize] = useState(25);
16  const [data, setData] = useState([]);
17  const [loading, setLoading] = useState(false);
18
19  return (<TableContainer>
20        <Table variant="striped" size="sm">
21          <Thead>
22            <Tr>
23              <Th>
24                  Nombre
25              <Th>
26                  Apellido
27              </Th>
28              
29            </Tr>
30          </Thead>
31          <Tbody>
32            {data
33                .map((item) => {
34                  return (
35                    <Tr key={item._id}>
36                      <Td>{item.firstName}</Td>
37                      <Td>{item.lastName}</Td>
38                    </Tr>
39                  );
40                })
41                .slice(pageSize * pageIndex, pageSize * (pageIndex + 1))
42            }
43          </Tbody>
44        </Table>
45        <PaginationTable
46          pageSize={pageSize}
47          setPageSize={setPageSize}
48          pageIndex={pageIndex}
49          setPageIndex={setPageIndex}
50          totalItemsCount={data.length}
51          pageSizeOptions={[10, 25, 50]}
52        />
53      </TableContainer>)
54
55}

Demo

https://alepiumetti.github.io/chakra-ui-table-w-pagination-sort-search/

Contribuir

Contribuir

¡Damos la bienvenida a las contribuciones a este proyecto! Para comenzar, sigue estos pasos:

1. 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.

2. Clona tu fork: Usa el siguiente comando para clonar tu repositorio bifurcado en tu máquina local.

1git clone https://github.com/tu-usuario/chakra-ui-table-w-pagination-sort-search.git

3. Crea una nueva rama: Crea una nueva rama para tu característica o corrección de errores.

1git checkout -b mi-rama-de-característica

4. Haz tus cambios: Implementa tu característica o corrige el error.

5. Confirma tus cambios: Confirma tus cambios con un mensaje descriptivo.

1git commit -m "Descripción de la característica o corrección"

6. Empuja a tu fork: Empuja tus cambios a tu repositorio bifurcado.

1git push origin mi-rama-de-característica

7. 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!