Tables

Permite mostrar información en forma tabulada.

NombreTeléfonoEmailStatus
Victoria Kilmurray Marthen5566778899vmarthen0@uol.com.brAprobado
Ceciley Pickrell Kyndred5566778899ckyndred1@livejournal.comEn espera
Esteban Gowan Mirrlees5566778899emirrlees2@123-reg.co.ukDenegado

Utilización

import { Table, TableHead, TableBody } from "firefly-components/tables";

<Table>
    <TableHead>
        <tr>
            <th>Nombre</th>
            <th>Teléfono</th>
            <th>Email</th>
            <th>Status</th>
        </tr>
    </TableHead>
    <TableBody>
        <tr>
            <td>Victoria Kilmurray Marthen</td>
            <td>5566778899</td>
            <td>vmarthen0@uol.com.br</td>
            <td>
                <Badge type="success" content="Aprobado" />
            </td>
        </tr>
        <tr>
            <td>Ceciley Pickrell Kyndred</td>
            <td>5566778899</td>
            <td>ckyndred1@livejournal.com</td>
            <td>
                    <Badge type="warning" content="En espera" />
            </td>
        </tr>
        <tr>
             <td>Esteban Gowan Mirrlees</td>
            <td>5566778899</td>
            <td>emirrlees2@123-reg.co.uk</td>
            <td>
                <Badge type="danger" content="Denegado" />
             </td>
        </tr>
    </TableBody>
</Table>

Table Head

Dentro del componente TableHead debe colocarse las cabeceras de cada columna de la tabla. Este componente solo debe usarse dentro del componente Table.

import { TableHead } from "firefly-components/tables";

<TableHead>
    <tr>
        <th>Nombre</th>
        <th>Teléfono</th>
        <th>Email</th>
        <th>Status</th>
    </tr>
</TableHead>

Table Body

Dentro del componente TableBody debe colocarse el contenido de la tabla. Este componente solo debe usarse dentro del componente Table.

import { TableBody } from "firefly-components/tables";

<TableBody>
    <tr>
        <td>Victoria Kilmurray Marthen</td>
        <td>5566778899</td>
        <td>vmarthen0@uol.com.br</td>
    </tr>
    <tr>
        <td>Ceciley Pickrell Kyndred</td>
        <td>5566778899</td>
        <td>ckyndred1@livejournal.com</td>                        
    </tr>
    <tr>
        <td>Esteban Gowan Mirrlees</td>
        <td>5566778899</td>
        <td>emirrlees2@123-reg.co.uk</td>
    </tr>
</TableBody>

El componente TableFooter es util para extender la funcionalidad de las tablas. Permite controlar el número de filas por pagina y mostrar los controles de paginación. Este componente solo debe usarse dentro del componente Table.

Utilización

import { TableFooter } from "firefly-components/tables"; 
                
<Table>
    <TableHead>
        Cabeceras de la tabla...
    </TableHead>

    <TableBody>
        Contenido de la tabla...
    </TableBody>

    <TableFooter
        currentPage={1}
        totalPages={10}
        siblingCount={2}
        rowsPerPage={10}
    />
</Table>

Resultado

NombreTeléfonoEmailStatus
Victoria Kilmurray Marthen5566778899vmarthen0@uol.com.brAprobado
Ceciley Pickrell Kyndred5566778899ckyndred1@livejournal.comEn espera
Filas por pagina:
...

Props

currentPageRecibe un número entero que representa la página actualmente activa en la paginación. Utiliza un índice basado en 1 en lugar de un índice tradicional basado en 0.
totalPagesRecibe un número entero que especifica la cantidad total de páginas disponibles en la paginación.
siblingCountRecibe un número entero que representa el número mínimo de botones de página que se mostrarán a cada lado del botón de página actualmente activa en la paginación. Si no se especifica, su valor predeterminado es 1.
handlePageChangeRecibe una función que será invocada cuando se haga clic en alguno de los botones de página o en los botones de siguiente y atras de la paginación. Esta función recibirá por parámetros la nueva pagina a cambiar.
rowsPerPageRecibe un número entero que representa la cantidad de filas por pagina mostradas en la tabla.
handlePerPageChangeRecibe una función que será invocada cuando el usuario hace un cambio en el select que controla el numero de filas por pagina. Esta función recibirá por parámetros el nuevo numero de filas por pagina.
perPageOptionsRecibe una array de números de enteros los cuales representan las opciones del select que controla el número de filas por pagina.
En esta pagina: