Paginación de tabla

Paginación de tabla en Storybook

Uso

Descripción general

La paginación permite a los usuarios navegar por grandes conjuntos de datos dividiendo el contenido en páginas manejables. Proporciona controles para navegar por las páginas y ajustar la cantidad de elementos que se muestran a la vez, lo cual es esencial para mantener el rendimiento y la legibilidad en aplicaciones con gran cantidad de datos.

Cuándo se debe utilizar

• Para administrar grandes conjuntos de datos: Utilícela cuando una tabla tenga cientos o miles de filas, y presentarlas todas a la vez afecta el rendimiento o los tiempos de carga de la página.
• Para mejorar la escaneabilidad: Utilícela cuando demasiados datos en una página abrumen a los usuarios y dificulte encontrar o comparar valores.
• Para mejorar la accesibilidad: Utilícela cuando las tablas grandes creen problemas de navegación para los lectores de pantalla o los usuarios de teclado (por ejemplo, explorar una tabla con cientos de filas no resulta práctico).
• Para vistas filtradas: Utilícela cuando los usuarios suelen ver un subconjunto de datos, como resultados de búsqueda o vistas filtradas. La paginación los mantiene orientados y ayuda con fragmentos manejables.

Cuándo no se debe utilizar

• Para conjuntos de datos pequeños: Evítela si todas las filas se pueden mostrar sin problemas de rendimiento o abrumar al usuario (por ejemplo, de 20 a 50 filas).
• Para tareas de comparación amplia: Evítela cuando los usuarios necesiten comparar muchas filas a la vez; analice la posibilidad del desplazamiento virtual o las vistas filtradas en su lugar.
• Para tareas de vista única: No la use si el conjunto de datos representa un conjunto completo que no se puede dividir en páginas, como una tabla de configuración.

Formato

Anatomía

El componente de paginación aparece en la parte inferior del contenido que controla y consta de los siguientes elementos:

1. Selección de filas por página: Menú desplegable que permite a los usuarios cambiar la cantidad de elementos que se muestran en cada página.
2. Visualización de intervalo de elementos: Rótulo de texto que comunica qué elementos se están viendo actualmente en el contexto de la cantidad total de elementos (por ejemplo, “1 - 10 de 25”).
3. Controles de navegación: Botones de ícono que permiten a los usuarios desplazarse a la página de datos anterior o siguiente, así como navegar a la primera y última página.

Contenido

Pautas generales de redacción

• En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
• Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
• Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
• Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
• Las palabras y las oraciones deben ser breves.

Comportamientos

Estados

Los estados principales del componente paginación se relacionan con sus controles de navegación.

• El botón Página anterior debe estar deshabilitado cuando el usuario se encuentre en la primera página de datos.
• El botón Página siguiente debe estar deshabilitado cuando el usuario se encuentre en la última página de datos.

Interacciones

• Si selecciona un nuevo valor del menú desplegable Filas por página, se vuelve a cargar el componente asociado para mostrar la cantidad de elementos seleccionada.
• Al hacer clic en los botones Página siguiente o Página anterior, el usuario navega por el conjunto de datos una página a la vez.

Métodos de uso de paginación

• Uso predeterminado: Utilice el componente en un contexto estándar y sincrónico. Los clientes proporcionan los valores directamente al componente.
• Uso de tablas asíncronas: Cuando se usa con tablas que recuperan datos de forma asíncrona desde un servidor, la paginación refleja el estado actual de la tabla. El componente en sí permanece sincrónico; la tabla administra la lógica asíncrona. Este método se aplica tanto al uso predeterminado como cuando se usa la TanStack Table.
• Uso de TanStack Table: Cuando se utiliza una tabla administrada por TanStack Table, el consumidor pasa el estado de paginación de la tabla al componente de paginación. Esto permite que la interfaz de usuario de paginación refleje el estado actual de la tabla, incluidas las actualizaciones asíncronas o controladas por el servidor administradas por la tabla.

Accesibilidad

Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:

• La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
• El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
• El elemento se puede operar con teclado, así como con mouse.
• Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.

El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.

Cuando utilice este componente en su aplicación, respete estas prácticas recomendadas:

• Interacción con el teclado: Todos los controles dentro del componente paginación deben poder recibir el foco y poder manejarse con el teclado. Los usuarios deben poder navegar entre el menú desplegable y los botones de navegación con la tecla Tab y activarlos con las teclas Enter o Space.
• Lector de pantalla: El componente paginación debe estar encapsulado en un elemento <nav> con una aria-label de “Paginación” para identificarlo como una región de referencia. Todos los controles deben tener nombres claros y accesibles. Para los botones de navegación, use atributos aria-label como “Ir a la página anterior” e “Ir a la página siguiente”. La visualización del intervalo de elementos (por ejemplo, “1 - 10 de 25”) debe estar asociada mediante programación con los controles, de modo que se pueda anunciar a los usuarios de lectores de pantalla, lo que proporciona un contexto esencial para la navegación.

Código

<Table>
    {/* Table component content */}
</Table>
<Pagination
    currentPageIndex={pageIndex}
    pageSize={pageSize}
    totalRows={totalRows}
    pageSizeOptions={args.pageSizeOptions}
    onPageIndexChange={newPageIndex => {
        argsOnPageIndexChange(newPageIndex);
        onPageIndexChange(newPageIndex);
    }}
    onPageSizeChange={newPageSize => {
        argsOnPageSizeChange(newPageSize);
        onPageSizeChange(newPageSize);
    }}
    className={styles.tablePagination}
    aria-label={`${TableTitleString} pagination`}
    disabled={args.disabled}
/>

Consulte la sección Ejemplos para ver ejemplos de código completos que muestran varias implementaciones de paginación.

Instrucción de importación

import { Pagination } from '@jutro/components';

Contrato de componentes

Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.

Propiedades

currentPageIndexobligatorio

Tipo

number

Descripción

Defines the current page index, using zero-based indexing method. Defaults to 0 if set to a number less than 0.

Valor predeterminado

0

onPageIndexChangeobligatorio

Tipo

(newPageIndex: number) => void

Descripción

Callback function that is invoked when the page index changes.

onPageSizeChangeobligatorio

Tipo

(newPageSize: number) => void

Descripción

Callback function that is invoked when the page size changes.

totalRowsobligatorio

Tipo

number

Descripción

Defines the total number of rows currently available in the dataset. It takes into account any applied filters.

disabled

Tipo

boolean

Descripción

Determines whether the pagination component is disabled. It is used to disable the pagination controls during loading state.

Valor predeterminado

false

pageSize

Tipo

number

Descripción

Defines the number of rows shown per page. Defaults to 10 if less than or equal to 0.

Valor predeterminado

10

pageSizeOptions

Tipo

number[]

Descripción

Defines the available page size options. Values less than or equal to 0 are ignored.

Valor predeterminado

[10, 25, 50]

Ganchos

No hay ganchos para Pagination.

Claves de traducción

No hay traducciones para Pagination.

Para obtener información sobre cómo gestionar las traducciones, consulte nuestra sección sobre internacionalización.

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Ejemplos

El componente tabla proporciona la funcionalidad de paginación completa utilizando solo componentes de Jutro. Para casos de uso avanzados o integraciones existentes, puede aprovechar opcionalmente bibliotecas externas como TanStack Table para manejar partes de la lógica de administración de datos.

Puede revisar dos tipos de ejemplos de código para la paginación de tablas que demuestran el uso de componentes de Jutro solamente y el uso de TanStack Table para parte de la lógica de administración de datos. Los ejemplos tienen todos los archivos necesarios para que los ejecute en su entorno, como ganchos y datos simulados. Cada ejemplo tiene un conjunto diferente de archivos.

Consulte la sección Uso para obtener detalles sobre cómo diseñar una tabla correctamente y las diferentes opciones de configuración que ofrecemos.

Implementación de paginación básica

Para implementar la paginación con el componente de tabla, combine los componentes Table y Pagination con una capa de administración de datos, como un gancho personalizado que administre el estado de paginación.

El componente paginación requiere las propiedades currentPageIndex y totalRows para mostrar el estado correcto, junto con las devoluciones de llamada onPageIndexChange y onPageSizeChange para manejar las interacciones del usuario. Para manejar los cambios de página, actualice el estado de los datos y lleve nuevamente a la primera página cuando cambia el tamaño de la página para garantizar que los usuarios no terminen en páginas vacías.

Utilice una capa de administración de datos (como el gancho personalizado useTableData) para dividir el conjunto de datos en función de la página y el tamaño de página actuales y, a continuación, pase los datos paginados a las filas de la tabla.

Como alternativa, puede usar TanStack Table como capa de administración de datos, que proporciona administración incorporada del estado de paginación y maneja los cálculos de páginas automáticamente a través de su gancho useReactTable.

Accesibilidad

El componente paginación debe colocarse debajo de la tabla con un aria-label apropiado que haga referencia al título de la tabla para garantizar la accesibilidad. Pase el string traducido desde el componente título de tabla con un sufijo “paginación” a la propiedad aria-label del componente Pagination.

Implementación de componentes

Pagination.tsx

import React, { useId, type ReactNode } from 'react';

import {
    BodyCell,
    BodyRow,
    HeaderCell,
    HeaderRow,
    Pagination,
    Table,
    TableBody,
    TableHeader,
} from '@jutro/components';
import type { PaginationProps, TableProps } from '@jutro/components';
import { Typography } from '@jutro/components';

import { TableMockData, tableMockData } from './table.mockdata';

import { useTableData } from './useTableDataPagination';

/** Column type definition that specifies the structure for table columns. */
/** Each column has an id, header renderer, cell renderer, and optional alignment. */
export type Column<T> = {
    id: string;
    header: () => ReactNode;
    cell: (row: T) => ReactNode;
    align?: 'left' | 'right' | 'center';
};

export type ColumnDefinition<T extends object> = Array<Column<T>>;

/** Column configuration for the table with Product, Insured, and Premium columns. */
export const columns: ColumnDefinition<TableMockData> = [
    {
        id: 'product',
        header: () => (
            <Typography variant="heading-5" tag="span">
                Product
            </Typography>
        ),
        cell: row => (
            <Typography>{row.product.name}</Typography>
        ),
    },
    {
        id: 'insured',
        header: () => (
            <Typography variant="heading-5" tag="span">
                Insured
            </Typography>
        ),
        cell: row => <Typography>{row.insured}</Typography>,
    },
    {
        id: 'premium',
        header: () => (
            <Typography variant="heading-5" tag="span">
                Premium
            </Typography>
        ),
        cell: row => (
            <Typography>
                {`${row.premium.currency} ${row.premium.amount?.toFixed(2)}`}
            </Typography>
        ),
        align: 'right',
    },
];

export const TableTitleString = 'Policy list';

/** Component that renders a table title section with heading and subtitle. */
export const TableTitle: React.FC<{ tableId: string }> = ({ tableId }) => (
    <div>
        <div>
            <Typography variant="heading-2" id={tableId}>
                {TableTitleString}
            </Typography>
            <Typography role="doc-subtitle">
                Detailed record of individual policies
            </Typography>
        </div>
    </div>
);

export function PaginationStory(
    args: TableProps & PaginationProps
): React.ReactElement {
    const tableId = useId();

    /** Provide default values for callback props. */
    const {
        onPageIndexChange: argsOnPageIndexChange = () => {},
        onPageSizeChange: argsOnPageSizeChange = () => {},
        ...restArgs
    } = args;

    const {
        data,
        pageSize,
        pageIndex,
        totalRows,
        onPageIndexChange,
        onPageSizeChange,
    } = useTableData<TableMockData>({
        data: tableMockData,
    });

    return (
        <div>
            <TableTitle tableId={tableId} />
            <Table
                noStripedRows={args.noStripedRows}
                className={args.className}
                aria-labelledby={tableId}
            >
                <TableHeader>
                    <HeaderRow>
                        {columns.map(({ id, header, align }, columnIndex) => (
                            <HeaderCell
                                key={id}
                                columnIndex={columnIndex}
                                align={align}
                            >
                                {header()}
                            </HeaderCell>
                        ))}
                    </HeaderRow>
                </TableHeader>
                <TableBody>
                    {data.map((row, rowIndex) => (
                        <BodyRow key={row.id}>
                            {columns.map(({ id, cell, align }, columnIndex) => (
                                <BodyCell
                                    key={`${id}_${row.id}`}
                                    rowIndex={rowIndex}
                                    columnIndex={columnIndex}
                                    align={align}
                                >
                                    {cell(row)}
                                </BodyCell>
                            ))}
                        </BodyRow>
                    ))}
                </TableBody>
            </Table>
            <Pagination
                currentPageIndex={pageIndex}
                pageSize={pageSize}
                totalRows={totalRows}
                pageSizeOptions={args.pageSizeOptions}
                onPageIndexChange={newPageIndex => {
                    argsOnPageIndexChange(newPageIndex);
                    onPageIndexChange(newPageIndex);
                }}
                onPageSizeChange={newPageSize => {
                    argsOnPageSizeChange(newPageSize);
                    onPageSizeChange(newPageSize);
                }}
                aria-label={`${TableTitleString} pagination`}
                disabled={args.disabled}
            />
        </div>
    );
}

Administración de los datos

useTableDataPagination.ts

import { useMemo, useState } from 'react';

/** Arguments for the useTableData hook. */
export type UseTableDataArgs<T extends object> = {
    data: T[];
    initialState?: {
        pageSize?: number;
        pageIndex?: number;
    };
};

/** Return type for the useTableData hook. */
export type UseTableDataResult<T extends object> = {
    data: T[];
    pageSize: number | undefined;
    pageIndex: number;
    totalRows: number;
    onPageIndexChange: (index: number) => void;
    onPageSizeChange: (size: number) => void;
};

const DEFAULT_PAGE_INDEX = 0;
const DEFAULT_PAGE_SIZE = 10;

/**
 * Utility class for handling table data operations.
 * Provides methods for pagination and data manipulation.
 */
class TableData<T extends object> {
    private data: T[];
    private length: number;

    constructor(data: T[]) {
        this.data = data;
        this.length = this.data.length;
    }

    paginate(pageIndex: number, pageSize: number) {
        const sliceStart = pageIndex * pageSize;
        const sliceEnd = (pageIndex + 1) * pageSize;

        this.data = this.data.slice(sliceStart, sliceEnd);

        return this;
    }

    getLength() {
        return this.length;
    }

    getData() {
        return this.data;
    }
}

/**
 * Custom React hook for managing table data with pagination.
 * Handles pagination state and provides paginated data along with control functions.
 */
export function useTableData<T extends object>({
    data: initialData,
    initialState: {
        pageIndex: initialPageIndex = DEFAULT_PAGE_INDEX,
        pageSize: initialPageSize = DEFAULT_PAGE_SIZE,
    } = {},
}: UseTableDataArgs<T>): UseTableDataResult<T> {
    const [pageSize, setPageSize] = useState(initialPageSize);
    const [pageIndex, setPageIndex] = useState(initialPageIndex);

    const { tableData, totalRows } = useMemo(() => {
        const tableDataFactory = new TableData<T>(initialData);

        return {
            tableData: tableDataFactory
                .paginate(pageIndex, pageSize)
                .getData(),
            totalRows: initialData.length,
        };
    }, [
        initialData,
        pageIndex,
        pageSize,
    ]);

    const onPageIndexChange = (newPageIndex: number) => {
        setPageIndex(newPageIndex);
    };

    const onPageSizeChange = (newPageSize: number) => {
        const newPageIndex = Math.floor((pageIndex * pageSize) / newPageSize);

        setPageSize(newPageSize);
        setPageIndex(newPageIndex);
    };

    return {
        data: tableData,
        pageSize,
        pageIndex,
        totalRows,
        onPageIndexChange,
        onPageSizeChange,
    };
}

table.mockdata.ts

import type { CurrencyInputProps } from '@jutro/components';

export type TableMockDataProduct = {
    name: string;
};

export type TableMockDataCurrency = NonNullable<CurrencyInputProps['value']>;

export type TableMockData = {
    id: string;
    product: TableMockDataProduct;
    insured: string;
    premium: TableMockDataCurrency;
};

export const tableMockData: Array<TableMockData> = [
    {
        id: '73065',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Marshall Rogahn',
        premium: { currency: 'USD', amount: 1236.39 },
    },
    {
        id: '80077',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'April Kub',
        premium: { currency: 'USD', amount: 173.99 },
    },
    {
        id: '64487',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Abel Rippin',
        premium: { currency: 'USD', amount: 1228.69 },
    },
    {
        id: '12345',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'John Smith',
        premium: { currency: 'USD', amount: 892.45 },
    },
    {
        id: '23456',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Sarah Johnson',
        premium: { currency: 'USD', amount: 567.23 },
    },
    {
        id: '34567',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Michael Brown',
        premium: { currency: 'USD', amount: 445.67 },
    },
    {
        id: '45678',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Emily Davis',
        premium: { currency: 'USD', amount: 2134.89 },
    },
    {
        id: '56789',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'David Wilson',
        premium: { currency: 'USD', amount: 823.45 },
    },
    {
        id: '67890',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Jessica Miller',
        premium: { currency: 'USD', amount: 298.76 },
    },
    {
        id: '78901',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Christopher Taylor',
        premium: { currency: 'USD', amount: 3456.78 },
    },
    {
        id: '37586',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Pamela Heller',
        premium: { currency: 'USD', amount: 1947.5 },
    },
    {
        id: '32975',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Mr. Mike Stehr',
        premium: { currency: 'USD', amount: 340.39 },
    },
    {
        id: '56789',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Katie Ankunding',
        premium: { currency: 'USD', amount: 430.25 },
    },
    {
        id: '44320',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Dawn Hermiston',
        premium: { currency: 'USD', amount: 794.35 },
    },
    {
        id: '05401',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Erika Turner',
        premium: { currency: 'USD', amount: 156.69 },
    },
    {
        id: '53420',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Harold Leannon',
        premium: { currency: 'USD', amount: 255.29 },
    },
    {
        id: '05681',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jeffery Mills',
        premium: { currency: 'USD', amount: 502.69 },
    },
    {
        id: '97696',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Theresa Bernier',
        premium: { currency: 'USD', amount: 1580.49 },
    },
    {
        id: '70782',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Ms. Danielle Kuhic',
        premium: { currency: 'USD', amount: 1821.85 },
    },
    {
        id: '35800',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Sidney Raynor',
        premium: { currency: 'USD', amount: 447.8 },
    },
    {
        id: '93190',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Marcella Heaney',
        premium: { currency: 'USD', amount: 524.29 },
    },
    {
        id: '71208',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Bernard Torp',
        premium: { currency: 'USD', amount: 130.89 },
    },
    {
        id: '35905',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ebony Thompson',
        premium: { currency: 'USD', amount: 1960.29 },
    },
    {
        id: '52899',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Jackie Lehner',
        premium: { currency: 'USD', amount: 1971.19 },
    },
    {
        id: '34985',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Oliver Lynch',
        premium: { currency: 'USD', amount: 244.45 },
    },
    {
        id: '23141',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Darnell Roob-Connelly',
        premium: { currency: 'USD', amount: 1203.59 },
    },
    {
        id: '80844',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Belinda Hintz',
        premium: { currency: 'USD', amount: 1436.89 },
    },
    {
        id: '93284',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Miss Shelley Gibson',
        premium: { currency: 'USD', amount: 1241.85 },
    },
    {
        id: '25834',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Suzanne Schuster',
        premium: { currency: 'USD', amount: 528.29 },
    },
    {
        id: '31574',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Jason DuBuque Jr.',
        premium: { currency: 'USD', amount: 1749.69 },
    },
    {
        id: '20234',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Bonnie Carter',
        premium: { currency: 'USD', amount: 989.79 },
    },
    {
        id: '62358',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ismael Carter-Weber',
        premium: { currency: 'USD', amount: 1344.29 },
    },
    {
        id: '79336',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Myra Jast',
        premium: { currency: 'USD', amount: 959.55 },
    },
    {
        id: '26031',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Ms. Estelle Kunde',
        premium: { currency: 'USD', amount: 262.79 },
    },
    {
        id: '98761',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Juana Green III',
        premium: { currency: 'USD', amount: 1324.5 },
    },
    {
        id: '65487',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Melissa Bahringer',
        premium: { currency: 'USD', amount: 1974.29 },
    },
    {
        id: '11811',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Doyle Aufderhar',
        premium: { currency: 'USD', amount: 838.29 },
    },
    {
        id: '77339',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Tonya Gibson',
        premium: { currency: 'USD', amount: 1644 },
    },
    {
        id: '21024',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Edmond Osinski',
        premium: { currency: 'USD', amount: 170.09 },
    },
    {
        id: '94991',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Debbie Tillman MD',
        premium: { currency: 'USD', amount: 1072.89 },
    },
    {
        id: '37297',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Mr. Raymond Abshire-Runolfsdottir',
        premium: { currency: 'USD', amount: 417.78 },
    },
    {
        id: '13979',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Ella Adams',
        premium: { currency: 'USD', amount: 537.79 },
    },
    {
        id: '17343',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Ernesto Murphy',
        premium: { currency: 'USD', amount: 1444.25 },
    },
    {
        id: '42516',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ms. Josefina Heaney',
        premium: { currency: 'USD', amount: 144.95 },
    },
    {
        id: '75897',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Andrew Yost',
        premium: { currency: 'USD', amount: 712.79 },
    },
    {
        id: '75048',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Dallas Leffler',
        premium: { currency: 'USD', amount: 287.24 },
    },
    {
        id: '40348',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Melody Kohler',
        premium: { currency: 'USD', amount: 1117.49 },
    },
    {
        id: '92776',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Angelica Okuneva',
        premium: { currency: 'USD', amount: 1611.99 },
    },
    {
        id: '93152',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Terence Wilkinson',
        premium: { currency: 'USD', amount: 328.19 },
    },
    {
        id: '44352',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jeannette Murazik Jr.',
        premium: { currency: 'USD', amount: 1126.29 },
    },
    {
        id: '41856',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Joseph Pouros',
        premium: { currency: 'USD', amount: 878.49 },
    },
    {
        id: '11633',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Rachael Weimann',
        premium: { currency: 'USD', amount: 159.07 },
    },
    {
        id: '16770',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Mrs. Marta Jacobi',
        premium: { currency: 'USD', amount: 1779.49 },
    },
    {
        id: '53601',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Alicia Larkin',
        premium: { currency: 'USD', amount: 934.49 },
    },
    {
        id: '46741',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Mr. Jose Wisoky',
        premium: { currency: 'USD', amount: 1938.25 },
    },
    {
        id: '30067',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Dr. Brent Zboncak DVM',
        premium: { currency: 'USD', amount: 1680.27 },
    },
    {
        id: '87136',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Kayla Bode Sr.',
        premium: { currency: 'USD', amount: 1923.29 },
    },
    {
        id: '92090',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Sammy Bradtke',
        premium: { currency: 'USD', amount: 1478.15 },
    },
    {
        id: '62922',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Roberto Lindgren',
        premium: { currency: 'USD', amount: 836.69 },
    },
    {
        id: '64971',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Iris Cronin',
        premium: { currency: 'USD', amount: 850.33 },
    },
    {
        id: '72384',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Cathy Morar',
        premium: { currency: 'USD', amount: 1072.09 },
    },
    {
        id: '28848',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Dana Quigley',
        premium: { currency: 'USD', amount: 294.57 },
    },
    {
        id: '82642',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Simon Deckow',
        premium: { currency: 'USD', amount: 497.66 },
    },
    {
        id: '01350',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Lynda Kuhic I',
        premium: { currency: 'USD', amount: 256.09 },
    },
    {
        id: '48722',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Alexander Ryan',
        premium: { currency: 'USD', amount: 1755.99 },
    },
    {
        id: '86848',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Tommy Ratke',
        premium: { currency: 'USD', amount: 1802.35 },
    },
    {
        id: '29232',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Ann Baumbach',
        premium: { currency: 'USD', amount: 1049.55 },
    },
    {
        id: '05452',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Conrad Bernhard',
        premium: { currency: 'USD', amount: 1159.59 },
    },
    {
        id: '11648',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Ralph Weber',
        premium: { currency: 'USD', amount: 779.45 },
    },
    {
        id: '77546',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Guadalupe Wiza IV',
        premium: { currency: 'USD', amount: 1754.39 },
    },
    {
        id: '71382',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Candice Fahey',
        premium: { currency: 'USD', amount: 812.79 },
    },
    {
        id: '08393',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Laura Leannon DVM',
        premium: { currency: 'USD', amount: 1364.65 },
    },
    {
        id: '92539',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Kari Davis Jr.',
        premium: { currency: 'USD', amount: 1697.29 },
    },
    {
        id: '15371',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Wilma Frami',
        premium: { currency: 'USD', amount: 177.35 },
    },
    {
        id: '88128',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Yvonne Turcotte',
        premium: { currency: 'USD', amount: 1976.19 },
    },
    {
        id: '60171',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Marilyn Durgan',
        premium: { currency: 'USD', amount: 854.29 },
    },
    {
        id: '12899',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Audrey Lemke',
        premium: { currency: 'USD', amount: 842.78 },
    },
    {
        id: '60012',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Rufus Klein',
        premium: { currency: 'USD', amount: 1573.35 },
    },
    {
        id: '88293',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Manuel Berge PhD',
        premium: { currency: 'USD', amount: 1443.15 },
    },
    {
        id: '80959',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Marta Witting',
        premium: { currency: 'USD', amount: 1872.65 },
    },
    {
        id: '73252',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Santos Spinka',
        premium: { currency: 'USD', amount: 578.85 },
    },
    {
        id: '45442',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Julius Douglas',
        premium: { currency: 'USD', amount: 145.99 },
    },
    {
        id: '53022',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Clay Brakus-Konopelski',
        premium: { currency: 'USD', amount: 1392.3 },
    },
    {
        id: '75387',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Levi Predovic',
        premium: { currency: 'USD', amount: 874 },
    },
    {
        id: '70048',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Elias King',
        premium: { currency: 'USD', amount: 1727.9 },
    },
    {
        id: '93273',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jeff Parisian',
        premium: { currency: 'USD', amount: 1426.99 },
    },
    {
        id: '97759',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Tyrone Trantow',
        premium: { currency: 'USD', amount: 1276.29 },
    },
    {
        id: '12809',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Kristina Huels',
        premium: { currency: 'USD', amount: 502.49 },
    },
    {
        id: '17134',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ms. Pam Schamberger',
        premium: { currency: 'USD', amount: 1350.29 },
    },
    {
        id: '47589',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Ms. Hannah Stoltenberg',
        premium: { currency: 'USD', amount: 1069.29 },
    },
    {
        id: '36187',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Douglas Pollich',
        premium: { currency: 'USD', amount: 1763.7 },
    },
    {
        id: '19671',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Mrs. Clara Ward DVM',
        premium: { currency: 'USD', amount: 1826.7 },
    },
    {
        id: '10161',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Troy Jacobs',
        premium: { currency: 'USD', amount: 772.75 },
    },
    {
        id: '27633',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Kristin Casper',
        premium: { currency: 'USD', amount: 1280.99 },
    },
    {
        id: '01165',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jeanne Heaney',
        premium: { currency: 'USD', amount: 576.99 },
    },
    {
        id: '95399',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Geoffrey Armstrong',
        premium: { currency: 'USD', amount: 1895.25 },
    },
    {
        id: '57716',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Mark Spencer',
        premium: { currency: 'USD', amount: 1343.45 },
    },
    {
        id: '09176',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jackie Schmeler',
        premium: { currency: 'USD', amount: 1122.89 },
    },
    {
        id: '09265',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Charlotte Abbott-Greenholt',
        premium: { currency: 'USD', amount: 1364.18 },
    },
    {
        id: '66756',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Harriet Frami',
        premium: { currency: 'USD', amount: 767.05 },
    },
    {
        id: '71227',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Daisy Prohaska',
        premium: { currency: 'USD', amount: 899.09 },
    },
    {
        id: '86466',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Terry Wyman',
        premium: { currency: 'USD', amount: 1627.79 },
    },
    {
        id: '66603',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Julio Gibson',
        premium: { currency: 'USD', amount: 989.65 },
    },
    {
        id: '32235',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Terrell Robel IV',
        premium: { currency: 'USD', amount: 1614.59 },
    },
    {
        id: '17839',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Daniel Ernser',
        premium: { currency: 'USD', amount: 1440.69 },
    },
    {
        id: '49849',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Sheila Becker III',
        premium: { currency: 'USD', amount: 1564.15 },
    },
    {
        id: '54624',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ashley Hermiston',
        premium: { currency: 'USD', amount: 1607.19 },
    },
    {
        id: '86135',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Phillip Will',
        premium: { currency: 'USD', amount: 469.65 },
    },
    {
        id: '47434',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Sylvia Daugherty',
        premium: { currency: 'USD', amount: 750.45 },
    },
    {
        id: '81809',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Marshall Weber',
        premium: { currency: 'USD', amount: 623.89 },
    },
    {
        id: '45949',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Mr. Roberto Paucek',
        premium: { currency: 'USD', amount: 1282.29 },
    },
    {
        id: '12930',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Stacy Bartoletti',
        premium: { currency: 'USD', amount: 1736.69 },
    },
    {
        id: '46127',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Barry Thompson',
        premium: { currency: 'USD', amount: 429.89 },
    },
    {
        id: '60328',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Lucas Leannon',
        premium: { currency: 'USD', amount: 196.55 },
    },
    {
        id: '97955',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Dr. Bryant Franey V',
        premium: { currency: 'USD', amount: 409.99 },
    },
    {
        id: '36518',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Miriam Wyman',
        premium: { currency: 'USD', amount: 435.55 },
    },
    {
        id: '50622',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Tanya Gutkowski-Dibbert',
        premium: { currency: 'USD', amount: 1400.85 },
    },
    {
        id: '16533',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Betsy Ortiz',
        premium: { currency: 'USD', amount: 1756.25 },
    },
    {
        id: '78088',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Orlando Reilly-Wilderman I',
        premium: { currency: 'USD', amount: 477.71 },
    },
    {
        id: '49901',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Vicky Feil',
        premium: { currency: 'USD', amount: 1978.45 },
    },
    {
        id: '83313',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Dr. Dorothy Schamberger',
        premium: { currency: 'USD', amount: 1922.1 },
    },
    {
        id: '86698',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Carroll Tillman',
        premium: { currency: 'USD', amount: 1738.49 },
    },
    {
        id: '26873',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Fred Harber',
        premium: { currency: 'USD', amount: 686.29 },
    },
    {
        id: '59745',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Elena Christiansen',
        premium: { currency: 'USD', amount: 1991.15 },
    },
    {
        id: '73463',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Diana Kunze',
        premium: { currency: 'USD', amount: 305.59 },
    },
    {
        id: '86417',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Deanna Zemlak DVM',
        premium: { currency: 'USD', amount: 1814.99 },
    },
    {
        id: '30873',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Tonya Hermann',
        premium: { currency: 'USD', amount: 1836.05 },
    },
    {
        id: '45237',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Bernadette Strosin',
        premium: { currency: 'USD', amount: 1669.55 },
    },
    {
        id: '14011',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Bernadette Corwin',
        premium: { currency: 'USD', amount: 214.75 },
    },
    {
        id: '28450',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Mrs. Yvette Cummerata MD',
        premium: { currency: 'USD', amount: 1352.15 },
    },
    {
        id: '52767',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Darrin Smith',
        premium: { currency: 'USD', amount: 1029.55 },
    },
    {
        id: '35993',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Micheal Hackett',
        premium: { currency: 'USD', amount: 1433.69 },
    },
    {
        id: '26705',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Kim Pfeffer',
        premium: { currency: 'USD', amount: 1035.59 },
    },
    {
        id: '24670',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Cindy Botsford',
        premium: { currency: 'USD', amount: 1759.75 },
    },
    {
        id: '49540',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Melanie Altenwerth',
        premium: { currency: 'USD', amount: 438.99 },
    },
    {
        id: '46220',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Edwin Shields-Rice DDS',
        premium: { currency: 'USD', amount: 595.39 },
    },
    {
        id: '63936',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Rene Jaskolski',
        premium: { currency: 'USD', amount: 1445.09 },
    },
    {
        id: '00820',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Stacy Sporer Sr.',
        premium: { currency: 'USD', amount: 1461.15 },
    },
    {
        id: '08657',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Eileen Turcotte',
        premium: { currency: 'USD', amount: 1132.79 },
    },
    {
        id: '87687',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jordan Strosin',
        premium: { currency: 'USD', amount: 1946.7 },
    },
    {
        id: '36269',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Tracey Weissnat',
        premium: { currency: 'USD', amount: 1255.23 },
    },
    {
        id: '86888',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Pam Feil',
        premium: { currency: 'USD', amount: 435.57 },
    },
    {
        id: '78613',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Alton Dibbert',
        premium: { currency: 'USD', amount: 1242.79 },
    },
    {
        id: '96941',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Mrs. Melinda Roberts',
        premium: { currency: 'USD', amount: 1374.9 },
    },
    {
        id: '57810',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Lynn Shanahan',
        premium: { currency: 'USD', amount: 1965.29 },
    },
    {
        id: '70850',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Yvette Bergnaum Jr.',
        premium: { currency: 'USD', amount: 1234.35 },
    },
    {
        id: '95470',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Priscilla Oberbrunner',
        premium: { currency: 'USD', amount: 515.7 },
    },
    {
        id: '48161',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Glen Aufderhar',
        premium: { currency: 'USD', amount: 529.25 },
    },
    {
        id: '73098',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Salvador Krajcik',
        premium: { currency: 'USD', amount: 226.25 },
    },
    {
        id: '48041',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Mr. Dean Ritchie',
        premium: { currency: 'USD', amount: 707.39 },
    },
    {
        id: '32564',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Irving Kuhn',
        premium: { currency: 'USD', amount: 1327.29 },
    },
    {
        id: '10361',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Lauren Cruickshank',
        premium: { currency: 'USD', amount: 467.25 },
    },
    {
        id: '33124',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Angel Huels-Senger',
        premium: { currency: 'USD', amount: 681.45 },
    }
];

Implementación de componentes

PaginationTanstack.tsx

import React, { useId } from 'react';
import {
    flexRender,
    getCoreRowModel,
    getPaginationRowModel,
    useReactTable,
} from '@tanstack/react-table';

import {
    BodyCell,
    BodyRow,
    HeaderCell,
    HeaderRow,
    Pagination,
    Table,
    TableBody,
    TableHeader,
} from '@jutro/components';

import type { PaginationProps, TableProps } from '@jutro/components';

type TableStoryProps = TableProps & {
    onActionClick: (actionName: string, param?: unknown) => void;
};

import { TableMockData, tableMockData } from './table.mockdata';
import type { ColumnDef, RowData } from '@tanstack/react-table';
import { Typography } from '@jutro/components';

/** Tanstack Table module augmentation to extend ColumnMeta interface with alignment and aria-label properties. */
declare module '@tanstack/react-table' {
    interface ColumnMeta<TData extends RowData, TValue> {
        align?: 'left' | 'right' | 'center';
        ariaLabel?: string;
    }
}

/** Column configuration for the table with Product, Insured, and Premium columns. */
export const columns: ColumnDef<TableMockData, any>[] = [
    {
        id: 'product',
        header: () => (
            <Typography variant="heading-5" tag="span">
                Product
            </Typography>
        ),
        cell: props => <Typography>{props.getValue()}</Typography>,
        accessorFn: row => row.product.name,
        meta: {
            ariaLabel: 'Product',
        },
    },
    {
        id: 'insured',
        header: () => (
            <Typography variant="heading-5" tag="span">
                Insured
            </Typography>
        ),
        cell: props => <Typography>{props.getValue()}</Typography>,
        accessorKey: 'insured',
        meta: {
            ariaLabel: 'Insured',
        },
    },
    {
        id: 'premium',
        header: () => (
            <Typography variant="heading-5" tag="span">
                Premium
            </Typography>
        ),
        cell: props => <Typography>{props.getValue()}</Typography>,
        accessorFn: row =>
            `${row.premium.currency} ${row.premium.amount?.toFixed(2)}`,
        meta: {
            align: 'right',
            ariaLabel: 'Premium',
        },
    },
];

export const TableTitleString = 'Policy list';

/** Component that renders a table title section with heading and subtitle. */
export const TableTitle: React.FC<{ tableId: string }> = ({ tableId }) => (
    <div>
        <div>
            <Typography variant="heading-2" id={tableId}>
                {TableTitleString}
            </Typography>
            <Typography role="doc-subtitle">
                Detailed record of individual policies
            </Typography>
        </div>
    </div>
);

const TABLE_PAGE_SIZE_DEFAULT = 10;

export function PaginationTanstackStory(
    args: TableStoryProps & PaginationProps
): React.ReactElement {

    const tableId = useId();

    // Provide default values for callback props
    const {
        onPageIndexChange: argsOnPageIndexChange = () => {},
        onPageSizeChange: argsOnPageSizeChange = () => {},
        ...restArgs
    } = args;

    const table = useReactTable({
        data: tableMockData,
        columns,
        initialState: {
            pagination: {
                pageIndex: 0,
                pageSize: TABLE_PAGE_SIZE_DEFAULT,
            },
        },
        getCoreRowModel: getCoreRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
    });

    return (
        <div>
            <TableTitle tableId={tableId} />
            <Table
                noStripedRows={args.noStripedRows}
                className={args.className}
                aria-labelledby={tableId}
            >
                <TableHeader>
                    {table.getHeaderGroups().map(headerGroup => (
                        <HeaderRow key={headerGroup.id}>
                            {headerGroup.headers.map((header, columnIndex) => (
                                <HeaderCell
                                    key={header.id}
                                    columnIndex={columnIndex}
                                    align={header.column.columnDef.meta?.align}
                                >
                                    {flexRender(
                                        header.column.columnDef.header,
                                        header.getContext()
                                    )}
                                </HeaderCell>
                            ))}
                        </HeaderRow>
                    ))}
                </TableHeader>
                <TableBody>
                    {table.getRowModel().rows.map((row, rowIndex) => (
                        <BodyRow key={row.id}>
                            {row.getVisibleCells().map((cell, columnIndex) => (
                                <BodyCell
                                    key={cell.id}
                                    rowIndex={rowIndex}
                                    columnIndex={columnIndex}
                                    align={cell.column.columnDef.meta?.align}
                                >
                                    {flexRender(
                                        cell.column.columnDef.cell,
                                        cell.getContext()
                                    )}
                                </BodyCell>
                            ))}
                        </BodyRow>
                    ))}
                </TableBody>
            </Table>
            <Pagination
                currentPageIndex={table.getState().pagination.pageIndex}
                pageSize={table.getState().pagination.pageSize}
                totalRows={table.getPrePaginationRowModel().rows.length}
                pageSizeOptions={args.pageSizeOptions}
                onPageIndexChange={newPageIndex => {
                    argsOnPageIndexChange(newPageIndex);
                    table.setPageIndex(newPageIndex);
                }}
                onPageSizeChange={newPageSize => {
                    argsOnPageSizeChange(newPageSize);
                    table.setPageSize(newPageSize);
                }}
                aria-label={`${TableTitleString} pagination`}
                disabled={args.disabled}
            />
        </div>
    );
}

Administración de los datos

table.mockdata.ts

import type { CurrencyInputProps } from '@jutro/components';

export type TableMockDataProduct = {
    name: string;
};

export type TableMockDataCurrency = NonNullable<CurrencyInputProps['value']>;

export type TableMockData = {
    id: string;
    product: TableMockDataProduct;
    insured: string;
    premium: TableMockDataCurrency;
};

export const tableMockData: Array<TableMockData> = [
    {
        id: '73065',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Marshall Rogahn',
        premium: { currency: 'USD', amount: 1236.39 },
    },
    {
        id: '80077',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'April Kub',
        premium: { currency: 'USD', amount: 173.99 },
    },
    {
        id: '64487',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Abel Rippin',
        premium: { currency: 'USD', amount: 1228.69 },
    },
    {
        id: '12345',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'John Smith',
        premium: { currency: 'USD', amount: 892.45 },
    },
    {
        id: '23456',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Sarah Johnson',
        premium: { currency: 'USD', amount: 567.23 },
    },
    {
        id: '34567',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Michael Brown',
        premium: { currency: 'USD', amount: 445.67 },
    },
    {
        id: '45678',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Emily Davis',
        premium: { currency: 'USD', amount: 2134.89 },
    },
    {
        id: '56789',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'David Wilson',
        premium: { currency: 'USD', amount: 823.45 },
    },
    {
        id: '67890',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Jessica Miller',
        premium: { currency: 'USD', amount: 298.76 },
    },
    {
        id: '78901',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Christopher Taylor',
        premium: { currency: 'USD', amount: 3456.78 },
    },
    {
        id: '37586',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Pamela Heller',
        premium: { currency: 'USD', amount: 1947.5 },
    },
    {
        id: '32975',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Mr. Mike Stehr',
        premium: { currency: 'USD', amount: 340.39 },
    },
    {
        id: '56789',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Katie Ankunding',
        premium: { currency: 'USD', amount: 430.25 },
    },
    {
        id: '44320',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Dawn Hermiston',
        premium: { currency: 'USD', amount: 794.35 },
    },
    {
        id: '05401',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Erika Turner',
        premium: { currency: 'USD', amount: 156.69 },
    },
    {
        id: '53420',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Harold Leannon',
        premium: { currency: 'USD', amount: 255.29 },
    },
    {
        id: '05681',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jeffery Mills',
        premium: { currency: 'USD', amount: 502.69 },
    },
    {
        id: '97696',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Theresa Bernier',
        premium: { currency: 'USD', amount: 1580.49 },
    },
    {
        id: '70782',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Ms. Danielle Kuhic',
        premium: { currency: 'USD', amount: 1821.85 },
    },
    {
        id: '35800',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Sidney Raynor',
        premium: { currency: 'USD', amount: 447.8 },
    },
    {
        id: '93190',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Marcella Heaney',
        premium: { currency: 'USD', amount: 524.29 },
    },
    {
        id: '71208',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Bernard Torp',
        premium: { currency: 'USD', amount: 130.89 },
    },
    {
        id: '35905',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ebony Thompson',
        premium: { currency: 'USD', amount: 1960.29 },
    },
    {
        id: '52899',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Jackie Lehner',
        premium: { currency: 'USD', amount: 1971.19 },
    },
    {
        id: '34985',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Oliver Lynch',
        premium: { currency: 'USD', amount: 244.45 },
    },
    {
        id: '23141',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Darnell Roob-Connelly',
        premium: { currency: 'USD', amount: 1203.59 },
    },
    {
        id: '80844',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Belinda Hintz',
        premium: { currency: 'USD', amount: 1436.89 },
    },
    {
        id: '93284',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Miss Shelley Gibson',
        premium: { currency: 'USD', amount: 1241.85 },
    },
    {
        id: '25834',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Suzanne Schuster',
        premium: { currency: 'USD', amount: 528.29 },
    },
    {
        id: '31574',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Jason DuBuque Jr.',
        premium: { currency: 'USD', amount: 1749.69 },
    },
    {
        id: '20234',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Bonnie Carter',
        premium: { currency: 'USD', amount: 989.79 },
    },
    {
        id: '62358',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ismael Carter-Weber',
        premium: { currency: 'USD', amount: 1344.29 },
    },
    {
        id: '79336',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Myra Jast',
        premium: { currency: 'USD', amount: 959.55 },
    },
    {
        id: '26031',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Ms. Estelle Kunde',
        premium: { currency: 'USD', amount: 262.79 },
    },
    {
        id: '98761',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Juana Green III',
        premium: { currency: 'USD', amount: 1324.5 },
    },
    {
        id: '65487',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Melissa Bahringer',
        premium: { currency: 'USD', amount: 1974.29 },
    },
    {
        id: '11811',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Doyle Aufderhar',
        premium: { currency: 'USD', amount: 838.29 },
    },
    {
        id: '77339',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Tonya Gibson',
        premium: { currency: 'USD', amount: 1644 },
    },
    {
        id: '21024',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Edmond Osinski',
        premium: { currency: 'USD', amount: 170.09 },
    },
    {
        id: '94991',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Debbie Tillman MD',
        premium: { currency: 'USD', amount: 1072.89 },
    },
    {
        id: '37297',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Mr. Raymond Abshire-Runolfsdottir',
        premium: { currency: 'USD', amount: 417.78 },
    },
    {
        id: '13979',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Ella Adams',
        premium: { currency: 'USD', amount: 537.79 },
    },
    {
        id: '17343',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Ernesto Murphy',
        premium: { currency: 'USD', amount: 1444.25 },
    },
    {
        id: '42516',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ms. Josefina Heaney',
        premium: { currency: 'USD', amount: 144.95 },
    },
    {
        id: '75897',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Andrew Yost',
        premium: { currency: 'USD', amount: 712.79 },
    },
    {
        id: '75048',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Dallas Leffler',
        premium: { currency: 'USD', amount: 287.24 },
    },
    {
        id: '40348',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Melody Kohler',
        premium: { currency: 'USD', amount: 1117.49 },
    },
    {
        id: '92776',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Angelica Okuneva',
        premium: { currency: 'USD', amount: 1611.99 },
    },
    {
        id: '93152',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Terence Wilkinson',
        premium: { currency: 'USD', amount: 328.19 },
    },
    {
        id: '44352',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jeannette Murazik Jr.',
        premium: { currency: 'USD', amount: 1126.29 },
    },
    {
        id: '41856',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Joseph Pouros',
        premium: { currency: 'USD', amount: 878.49 },
    },
    {
        id: '11633',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Rachael Weimann',
        premium: { currency: 'USD', amount: 159.07 },
    },
    {
        id: '16770',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Mrs. Marta Jacobi',
        premium: { currency: 'USD', amount: 1779.49 },
    },
    {
        id: '53601',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Alicia Larkin',
        premium: { currency: 'USD', amount: 934.49 },
    },
    {
        id: '46741',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Mr. Jose Wisoky',
        premium: { currency: 'USD', amount: 1938.25 },
    },
    {
        id: '30067',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Dr. Brent Zboncak DVM',
        premium: { currency: 'USD', amount: 1680.27 },
    },
    {
        id: '87136',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Kayla Bode Sr.',
        premium: { currency: 'USD', amount: 1923.29 },
    },
    {
        id: '92090',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Sammy Bradtke',
        premium: { currency: 'USD', amount: 1478.15 },
    },
    {
        id: '62922',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Roberto Lindgren',
        premium: { currency: 'USD', amount: 836.69 },
    },
    {
        id: '64971',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Iris Cronin',
        premium: { currency: 'USD', amount: 850.33 },
    },
    {
        id: '72384',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Cathy Morar',
        premium: { currency: 'USD', amount: 1072.09 },
    },
    {
        id: '28848',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Dana Quigley',
        premium: { currency: 'USD', amount: 294.57 },
    },
    {
        id: '82642',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Simon Deckow',
        premium: { currency: 'USD', amount: 497.66 },
    },
    {
        id: '01350',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Lynda Kuhic I',
        premium: { currency: 'USD', amount: 256.09 },
    },
    {
        id: '48722',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Alexander Ryan',
        premium: { currency: 'USD', amount: 1755.99 },
    },
    {
        id: '86848',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Tommy Ratke',
        premium: { currency: 'USD', amount: 1802.35 },
    },
    {
        id: '29232',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Ann Baumbach',
        premium: { currency: 'USD', amount: 1049.55 },
    },
    {
        id: '05452',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Conrad Bernhard',
        premium: { currency: 'USD', amount: 1159.59 },
    },
    {
        id: '11648',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Ralph Weber',
        premium: { currency: 'USD', amount: 779.45 },
    },
    {
        id: '77546',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Guadalupe Wiza IV',
        premium: { currency: 'USD', amount: 1754.39 },
    },
    {
        id: '71382',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Candice Fahey',
        premium: { currency: 'USD', amount: 812.79 },
    },
    {
        id: '08393',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Laura Leannon DVM',
        premium: { currency: 'USD', amount: 1364.65 },
    },
    {
        id: '92539',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Kari Davis Jr.',
        premium: { currency: 'USD', amount: 1697.29 },
    },
    {
        id: '15371',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Wilma Frami',
        premium: { currency: 'USD', amount: 177.35 },
    },
    {
        id: '88128',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Yvonne Turcotte',
        premium: { currency: 'USD', amount: 1976.19 },
    },
    {
        id: '60171',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Marilyn Durgan',
        premium: { currency: 'USD', amount: 854.29 },
    },
    {
        id: '12899',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Audrey Lemke',
        premium: { currency: 'USD', amount: 842.78 },
    },
    {
        id: '60012',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Rufus Klein',
        premium: { currency: 'USD', amount: 1573.35 },
    },
    {
        id: '88293',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Manuel Berge PhD',
        premium: { currency: 'USD', amount: 1443.15 },
    },
    {
        id: '80959',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Marta Witting',
        premium: { currency: 'USD', amount: 1872.65 },
    },
    {
        id: '73252',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Santos Spinka',
        premium: { currency: 'USD', amount: 578.85 },
    },
    {
        id: '45442',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Julius Douglas',
        premium: { currency: 'USD', amount: 145.99 },
    },
    {
        id: '53022',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Clay Brakus-Konopelski',
        premium: { currency: 'USD', amount: 1392.3 },
    },
    {
        id: '75387',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Levi Predovic',
        premium: { currency: 'USD', amount: 874 },
    },
    {
        id: '70048',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Elias King',
        premium: { currency: 'USD', amount: 1727.9 },
    },
    {
        id: '93273',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jeff Parisian',
        premium: { currency: 'USD', amount: 1426.99 },
    },
    {
        id: '97759',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Tyrone Trantow',
        premium: { currency: 'USD', amount: 1276.29 },
    },
    {
        id: '12809',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Kristina Huels',
        premium: { currency: 'USD', amount: 502.49 },
    },
    {
        id: '17134',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ms. Pam Schamberger',
        premium: { currency: 'USD', amount: 1350.29 },
    },
    {
        id: '47589',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Ms. Hannah Stoltenberg',
        premium: { currency: 'USD', amount: 1069.29 },
    },
    {
        id: '36187',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Douglas Pollich',
        premium: { currency: 'USD', amount: 1763.7 },
    },
    {
        id: '19671',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Mrs. Clara Ward DVM',
        premium: { currency: 'USD', amount: 1826.7 },
    },
    {
        id: '10161',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Troy Jacobs',
        premium: { currency: 'USD', amount: 772.75 },
    },
    {
        id: '27633',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Kristin Casper',
        premium: { currency: 'USD', amount: 1280.99 },
    },
    {
        id: '01165',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jeanne Heaney',
        premium: { currency: 'USD', amount: 576.99 },
    },
    {
        id: '95399',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Geoffrey Armstrong',
        premium: { currency: 'USD', amount: 1895.25 },
    },
    {
        id: '57716',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Mark Spencer',
        premium: { currency: 'USD', amount: 1343.45 },
    },
    {
        id: '09176',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jackie Schmeler',
        premium: { currency: 'USD', amount: 1122.89 },
    },
    {
        id: '09265',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Charlotte Abbott-Greenholt',
        premium: { currency: 'USD', amount: 1364.18 },
    },
    {
        id: '66756',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Harriet Frami',
        premium: { currency: 'USD', amount: 767.05 },
    },
    {
        id: '71227',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Daisy Prohaska',
        premium: { currency: 'USD', amount: 899.09 },
    },
    {
        id: '86466',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Terry Wyman',
        premium: { currency: 'USD', amount: 1627.79 },
    },
    {
        id: '66603',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Julio Gibson',
        premium: { currency: 'USD', amount: 989.65 },
    },
    {
        id: '32235',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Terrell Robel IV',
        premium: { currency: 'USD', amount: 1614.59 },
    },
    {
        id: '17839',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Daniel Ernser',
        premium: { currency: 'USD', amount: 1440.69 },
    },
    {
        id: '49849',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Sheila Becker III',
        premium: { currency: 'USD', amount: 1564.15 },
    },
    {
        id: '54624',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ashley Hermiston',
        premium: { currency: 'USD', amount: 1607.19 },
    },
    {
        id: '86135',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Phillip Will',
        premium: { currency: 'USD', amount: 469.65 },
    },
    {
        id: '47434',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Sylvia Daugherty',
        premium: { currency: 'USD', amount: 750.45 },
    },
    {
        id: '81809',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Marshall Weber',
        premium: { currency: 'USD', amount: 623.89 },
    },
    {
        id: '45949',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Mr. Roberto Paucek',
        premium: { currency: 'USD', amount: 1282.29 },
    },
    {
        id: '12930',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Stacy Bartoletti',
        premium: { currency: 'USD', amount: 1736.69 },
    },
    {
        id: '46127',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Barry Thompson',
        premium: { currency: 'USD', amount: 429.89 },
    },
    {
        id: '60328',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Lucas Leannon',
        premium: { currency: 'USD', amount: 196.55 },
    },
    {
        id: '97955',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Dr. Bryant Franey V',
        premium: { currency: 'USD', amount: 409.99 },
    },
    {
        id: '36518',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Miriam Wyman',
        premium: { currency: 'USD', amount: 435.55 },
    },
    {
        id: '50622',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Tanya Gutkowski-Dibbert',
        premium: { currency: 'USD', amount: 1400.85 },
    },
    {
        id: '16533',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Betsy Ortiz',
        premium: { currency: 'USD', amount: 1756.25 },
    },
    {
        id: '78088',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Orlando Reilly-Wilderman I',
        premium: { currency: 'USD', amount: 477.71 },
    },
    {
        id: '49901',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Vicky Feil',
        premium: { currency: 'USD', amount: 1978.45 },
    },
    {
        id: '83313',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Dr. Dorothy Schamberger',
        premium: { currency: 'USD', amount: 1922.1 },
    },
    {
        id: '86698',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Carroll Tillman',
        premium: { currency: 'USD', amount: 1738.49 },
    },
    {
        id: '26873',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Fred Harber',
        premium: { currency: 'USD', amount: 686.29 },
    },
    {
        id: '59745',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Elena Christiansen',
        premium: { currency: 'USD', amount: 1991.15 },
    },
    {
        id: '73463',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Diana Kunze',
        premium: { currency: 'USD', amount: 305.59 },
    },
    {
        id: '86417',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Deanna Zemlak DVM',
        premium: { currency: 'USD', amount: 1814.99 },
    },
    {
        id: '30873',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Tonya Hermann',
        premium: { currency: 'USD', amount: 1836.05 },
    },
    {
        id: '45237',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Bernadette Strosin',
        premium: { currency: 'USD', amount: 1669.55 },
    },
    {
        id: '14011',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Bernadette Corwin',
        premium: { currency: 'USD', amount: 214.75 },
    },
    {
        id: '28450',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Mrs. Yvette Cummerata MD',
        premium: { currency: 'USD', amount: 1352.15 },
    },
    {
        id: '52767',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Darrin Smith',
        premium: { currency: 'USD', amount: 1029.55 },
    },
    {
        id: '35993',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Micheal Hackett',
        premium: { currency: 'USD', amount: 1433.69 },
    },
    {
        id: '26705',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Kim Pfeffer',
        premium: { currency: 'USD', amount: 1035.59 },
    },
    {
        id: '24670',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Cindy Botsford',
        premium: { currency: 'USD', amount: 1759.75 },
    },
    {
        id: '49540',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Melanie Altenwerth',
        premium: { currency: 'USD', amount: 438.99 },
    },
    {
        id: '46220',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Edwin Shields-Rice DDS',
        premium: { currency: 'USD', amount: 595.39 },
    },
    {
        id: '63936',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Rene Jaskolski',
        premium: { currency: 'USD', amount: 1445.09 },
    },
    {
        id: '00820',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Stacy Sporer Sr.',
        premium: { currency: 'USD', amount: 1461.15 },
    },
    {
        id: '08657',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Eileen Turcotte',
        premium: { currency: 'USD', amount: 1132.79 },
    },
    {
        id: '87687',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jordan Strosin',
        premium: { currency: 'USD', amount: 1946.7 },
    },
    {
        id: '36269',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Tracey Weissnat',
        premium: { currency: 'USD', amount: 1255.23 },
    },
    {
        id: '86888',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Pam Feil',
        premium: { currency: 'USD', amount: 435.57 },
    },
    {
        id: '78613',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Alton Dibbert',
        premium: { currency: 'USD', amount: 1242.79 },
    },
    {
        id: '96941',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Mrs. Melinda Roberts',
        premium: { currency: 'USD', amount: 1374.9 },
    },
    {
        id: '57810',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Lynn Shanahan',
        premium: { currency: 'USD', amount: 1965.29 },
    },
    {
        id: '70850',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Yvette Bergnaum Jr.',
        premium: { currency: 'USD', amount: 1234.35 },
    },
    {
        id: '95470',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Priscilla Oberbrunner',
        premium: { currency: 'USD', amount: 515.7 },
    },
    {
        id: '48161',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Glen Aufderhar',
        premium: { currency: 'USD', amount: 529.25 },
    },
    {
        id: '73098',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Salvador Krajcik',
        premium: { currency: 'USD', amount: 226.25 },
    },
    {
        id: '48041',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Mr. Dean Ritchie',
        premium: { currency: 'USD', amount: 707.39 },
    },
    {
        id: '32564',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Irving Kuhn',
        premium: { currency: 'USD', amount: 1327.29 },
    },
    {
        id: '10361',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Lauren Cruickshank',
        premium: { currency: 'USD', amount: 467.25 },
    },
    {
        id: '33124',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Angel Huels-Senger',
        premium: { currency: 'USD', amount: 681.45 },
    }
];

Implementación de paginación asíncrona

Este ejemplo demuestra la paginación con operaciones asincrónicas simuladas, como cuando se deben recuperar datos de un servidor. A diferencia del ejemplo de paginación básica, que maneja los datos de forma sincrónica, esta implementación agrega un estado cargando y simula retardos para las interacciones de paginación, a fin de mostrar cómo podría manejar situaciones reales donde los cambios de página desencadenan llamadas a la API.

Patrones de implementación clave

Al implementar la paginación asíncrona en sus aplicaciones, tenga en cuenta estos patrones esenciales:

Gestión del estado cargando

• Establezca el estado cargando en true de inmediato cuando se desencadenen las acciones de paginación.
• Utilice el rebote para evitar llamadas rápidas y sucesivas a la API durante las interacciones del usuario.
• Muestre indicadores visuales de carga mediante el componente TableLoader mientras se recuperan los datos.
• Desactive los controles de paginación durante la carga para evitar solicitudes que entren en conflicto.

Accesibilidad

• Establezca aria-busy="true" en la tabla durante los estados cargando.
• Use aria-live="polite" en la tabla para anunciar cambios de paginación a lectores de pantalla.
• Use la propiedad disabled en la paginación para evitar la interacción del usuario durante las operaciones asincrónicas y, al mismo tiempo, conservar la posición del foco del teclado.

Implementación de componentes

PaginationAsync.tsx

import React, { useId, type ReactNode } from 'react';

import {
    BodyCell,
    BodyRow,
    HeaderCell,
    HeaderRow,
    Pagination,
    Table,
    TableBody,
    TableHeader,
    TableLoader,
} from '@jutro/components';
import type { PaginationProps, TableProps } from '@jutro/components';
import { Typography } from '@jutro/components';

import { useAsyncTableData } from './useTableDataPaginationAsync';
import { TableMockData, tableMockData } from './table.mockdata';

/** Column type definition that specifies the structure for table columns. */
/** Each column has an id, header renderer, cell renderer, and optional alignment. */
export type Column<T> = {
    id: string;
    header: () => ReactNode;
    cell: (row: T) => ReactNode;
    align?: 'left' | 'right' | 'center';
};

export type ColumnDefinition<T extends object> = Array<Column<T>>;

/** Column configuration for the table with Product, Insured, and Premium columns. */
export const columns: ColumnDefinition<TableMockData> = [
    {
        id: 'product',
        header: () => (
            <Typography variant="heading-5" tag="span">
                Product
            </Typography>
        ),
        cell: row => (
            <Typography>{row.product.name}</Typography>
        ),
    },
    {
        id: 'insured',
        header: () => (
            <Typography variant="heading-5" tag="span">
                Insured
            </Typography>
        ),
        cell: row => <Typography>{row.insured}</Typography>,
    },
    {
        id: 'premium',
        header: () => (
            <Typography variant="heading-5" tag="span">
                Premium
            </Typography>
        ),
        cell: row => (
            <Typography>
                {`${row.premium.currency} ${row.premium.amount?.toFixed(2)}`}
            </Typography>
        ),
        align: 'right',
    },
];

/** Props interface for the TableTitle component. */
type TableTitleProps = React.PropsWithChildren<{
    tableId: string;
    tableTitle?: string;
}>;

export const TableTitleString = 'Policy list';

/** Component that renders a table title section with heading and subtitle. */
export const TableTitle: React.FC<TableTitleProps> = ({
    tableId,
    tableTitle = TableTitleString,
}) => {
    return (
        <div>
            <div>
                <Typography variant="heading-2" id={tableId}>
                    {tableTitle}
                </Typography>
                <Typography role="doc-subtitle">
                    Detailed record of individual policies
                </Typography>
            </div>
        </div>
    );
};

export function PaginationAsyncStory(
    args: TableProps & PaginationProps
): React.ReactElement {
    const tableId = useId();

    // Provide default values for callback props
    const {
        onPageIndexChange: argsOnPageIndexChange = () => {},
        onPageSizeChange: argsOnPageSizeChange = () => {},
        ...restArgs
    } = args;

    const {
        data,
        loading,
        pageSize,
        pageIndex,
        totalRows,
        onPageIndexChange,
        onPageSizeChange,
    } = useAsyncTableData<TableMockData>({
        data: tableMockData,
    });

    return (
        <div>
            <TableTitle tableId={tableId} />
            <Table
                noStripedRows={args.noStripedRows}
                className={args.className}
                aria-labelledby={tableId}
                aria-busy={loading ? 'true' : 'false'}
                aria-live="polite"
            >
                <TableHeader>
                    <HeaderRow>
                        {columns.map(({ id, header, align }, columnIndex) => (
                            <HeaderCell
                                key={id}
                                columnIndex={columnIndex}
                                align={align}
                            >
                                {header()}
                            </HeaderCell>
                        ))}
                    </HeaderRow>
                </TableHeader>
                <TableBody>
                    {loading ? (
                        <TableLoader />
                    ) : (
                        data.map((row, rowIndex) => (
                            <BodyRow key={row.id}>
                                {columns.map(
                                    ({ id, cell, align }, columnIndex) => (
                                        <BodyCell
                                            key={`${id}_${row.id}`}
                                            rowIndex={rowIndex}
                                            columnIndex={columnIndex}
                                            align={align}
                                        >
                                            {cell(row)}
                                        </BodyCell>
                                    )
                                )}
                            </BodyRow>
                        ))
                    )}
                </TableBody>
            </Table>
            <Pagination
                currentPageIndex={pageIndex}
                pageSize={pageSize}
                totalRows={totalRows}
                pageSizeOptions={args.pageSizeOptions}
                onPageIndexChange={(newPageIndex: number) => {
                    argsOnPageIndexChange(newPageIndex);
                    onPageIndexChange(newPageIndex);
                }}
                onPageSizeChange={(newPageSize: number) => {
                    argsOnPageSizeChange(newPageSize);
                    onPageSizeChange(newPageSize);
                }}
                aria-label={`${TableTitleString} pagination`}
                disabled={args.disabled || loading}
            />
        </div>
    );
}

Administración de los datos

useTableDataPaginationAsync.ts

import { useMemo, useState } from 'react';
import { debounce } from 'lodash';


/** Arguments for the useTableData hook. */
export type UseTableDataArgs<T extends object> = {
    data: T[];
    initialState?: {
        pageSize?: number;
        pageIndex?: number;
    };
};

/** Return type for the useTableData hook. */
export type UseTableDataResult<T extends object> = {
    data: T[];
    pageSize: number | undefined;
    pageIndex: number;
    totalRows: number;
    onPageIndexChange: (index: number) => void;
    onPageSizeChange: (size: number) => void;
};

const DEFAULT_PAGE_INDEX = 0;
const DEFAULT_PAGE_SIZE = 10;

/**
 * Utility class for handling table data operations.
 * Provides methods for pagination and data manipulation.
 */
class TableData<T extends object> {
    private data: T[];
    private length: number;

    constructor(data: T[]) {
        this.data = data;
        this.length = this.data.length;
    }

    paginate(pageIndex: number, pageSize: number) {
        const sliceStart = pageIndex * pageSize;
        const sliceEnd = (pageIndex + 1) * pageSize;

        this.data = this.data.slice(sliceStart, sliceEnd);

        return this;
    }

    getLength() {
        return this.length;
    }

    getData() {
        return this.data;
    }
}

/**
 * Custom React hook for managing table data with pagination.
 * Handles pagination state and provides paginated data along with control functions.
 */

export function useTableData<T extends object>({
    data: initialData,
    initialState: {
        pageIndex: initialPageIndex = DEFAULT_PAGE_INDEX,
        pageSize: initialPageSize = DEFAULT_PAGE_SIZE,
    } = {},
}: UseTableDataArgs<T>): UseTableDataResult<T> {
    const [pageSize, setPageSize] = useState(initialPageSize);
    const [pageIndex, setPageIndex] = useState(initialPageIndex);

    const { tableData, totalRows } = useMemo(() => {
        const tableDataFactory = new TableData<T>(initialData);

        return {
            tableData: tableDataFactory
                .paginate(pageIndex, pageSize)
                .getData(),
            totalRows: initialData.length,
        };
    }, [
        initialData,
        pageIndex,
        pageSize,
    ]);

    const onPageIndexChange = (newPageIndex: number) => {
        setPageIndex(newPageIndex);
    };

    const onPageSizeChange = (newPageSize: number) => {
        const newPageIndex = Math.floor((pageIndex * pageSize) / newPageSize);

        setPageSize(newPageSize);
        setPageIndex(newPageIndex);
    };

    return {
        data: tableData,
        pageSize,
        pageIndex,
        totalRows,
        onPageIndexChange,
        onPageSizeChange,
    };
}

type UseAsyncTableDataArgs<T extends { id: string }> = UseTableDataArgs<T>;

type UseAsyncTableDataResult<T extends { id: string }> =
    UseTableDataResult<T> & {
        loading: boolean;
    };

const WAIT_TIME = 1000;

/**
 * Hook that wraps useTableData with simulated async loading states for pagination operations.
 */
export function useAsyncTableData<T extends { id: string }>(
    params: UseAsyncTableDataArgs<T>
): UseAsyncTableDataResult<T> {
    const [loading, setLoading] = useState(false);
    const tableDataResult = useTableData<T>(params);

    const setLoaded = useMemo(
        () =>
            debounce(() => {
                setLoading(false);
            }, WAIT_TIME),
        []
    );

    function simulateAsync<S>(callback: (...args: S[]) => void) {
        return (...args: S[]) => {
            setLoading(true);

            callback(...args);

            setLoaded();
        };
    }

    return {
        ...tableDataResult,
        loading,
        onPageIndexChange: simulateAsync(tableDataResult.onPageIndexChange),
        onPageSizeChange: simulateAsync(tableDataResult.onPageSizeChange),
    };
}

table.mockdata.ts

import type { CurrencyInputProps } from '@jutro/components';

export type TableMockDataProduct = {
    name: string;
};

export type TableMockDataCurrency = NonNullable<CurrencyInputProps['value']>;

export type TableMockData = {
    id: string;
    product: TableMockDataProduct;
    insured: string;
    premium: TableMockDataCurrency;
};

export const tableMockData: Array<TableMockData> = [
    {
        id: '73065',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Marshall Rogahn',
        premium: { currency: 'USD', amount: 1236.39 },
    },
    {
        id: '80077',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'April Kub',
        premium: { currency: 'USD', amount: 173.99 },
    },
    {
        id: '64487',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Abel Rippin',
        premium: { currency: 'USD', amount: 1228.69 },
    },
    {
        id: '12345',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'John Smith',
        premium: { currency: 'USD', amount: 892.45 },
    },
    {
        id: '23456',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Sarah Johnson',
        premium: { currency: 'USD', amount: 567.23 },
    },
    {
        id: '34567',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Michael Brown',
        premium: { currency: 'USD', amount: 445.67 },
    },
    {
        id: '45678',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Emily Davis',
        premium: { currency: 'USD', amount: 2134.89 },
    },
    {
        id: '56789',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'David Wilson',
        premium: { currency: 'USD', amount: 823.45 },
    },
    {
        id: '67890',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Jessica Miller',
        premium: { currency: 'USD', amount: 298.76 },
    },
    {
        id: '78901',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Christopher Taylor',
        premium: { currency: 'USD', amount: 3456.78 },
    },
    {
        id: '37586',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Pamela Heller',
        premium: { currency: 'USD', amount: 1947.5 },
    },
    {
        id: '32975',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Mr. Mike Stehr',
        premium: { currency: 'USD', amount: 340.39 },
    },
    {
        id: '56789',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Katie Ankunding',
        premium: { currency: 'USD', amount: 430.25 },
    },
    {
        id: '44320',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Dawn Hermiston',
        premium: { currency: 'USD', amount: 794.35 },
    },
    {
        id: '05401',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Erika Turner',
        premium: { currency: 'USD', amount: 156.69 },
    },
    {
        id: '53420',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Harold Leannon',
        premium: { currency: 'USD', amount: 255.29 },
    },
    {
        id: '05681',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jeffery Mills',
        premium: { currency: 'USD', amount: 502.69 },
    },
    {
        id: '97696',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Theresa Bernier',
        premium: { currency: 'USD', amount: 1580.49 },
    },
    {
        id: '70782',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Ms. Danielle Kuhic',
        premium: { currency: 'USD', amount: 1821.85 },
    },
    {
        id: '35800',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Sidney Raynor',
        premium: { currency: 'USD', amount: 447.8 },
    },
    {
        id: '93190',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Marcella Heaney',
        premium: { currency: 'USD', amount: 524.29 },
    },
    {
        id: '71208',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Bernard Torp',
        premium: { currency: 'USD', amount: 130.89 },
    },
    {
        id: '35905',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ebony Thompson',
        premium: { currency: 'USD', amount: 1960.29 },
    },
    {
        id: '52899',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Jackie Lehner',
        premium: { currency: 'USD', amount: 1971.19 },
    },
    {
        id: '34985',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Oliver Lynch',
        premium: { currency: 'USD', amount: 244.45 },
    },
    {
        id: '23141',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Darnell Roob-Connelly',
        premium: { currency: 'USD', amount: 1203.59 },
    },
    {
        id: '80844',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Belinda Hintz',
        premium: { currency: 'USD', amount: 1436.89 },
    },
    {
        id: '93284',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Miss Shelley Gibson',
        premium: { currency: 'USD', amount: 1241.85 },
    },
    {
        id: '25834',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Suzanne Schuster',
        premium: { currency: 'USD', amount: 528.29 },
    },
    {
        id: '31574',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Jason DuBuque Jr.',
        premium: { currency: 'USD', amount: 1749.69 },
    },
    {
        id: '20234',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Bonnie Carter',
        premium: { currency: 'USD', amount: 989.79 },
    },
    {
        id: '62358',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ismael Carter-Weber',
        premium: { currency: 'USD', amount: 1344.29 },
    },
    {
        id: '79336',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Myra Jast',
        premium: { currency: 'USD', amount: 959.55 },
    },
    {
        id: '26031',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Ms. Estelle Kunde',
        premium: { currency: 'USD', amount: 262.79 },
    },
    {
        id: '98761',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Juana Green III',
        premium: { currency: 'USD', amount: 1324.5 },
    },
    {
        id: '65487',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Melissa Bahringer',
        premium: { currency: 'USD', amount: 1974.29 },
    },
    {
        id: '11811',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Doyle Aufderhar',
        premium: { currency: 'USD', amount: 838.29 },
    },
    {
        id: '77339',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Tonya Gibson',
        premium: { currency: 'USD', amount: 1644 },
    },
    {
        id: '21024',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Edmond Osinski',
        premium: { currency: 'USD', amount: 170.09 },
    },
    {
        id: '94991',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Debbie Tillman MD',
        premium: { currency: 'USD', amount: 1072.89 },
    },
    {
        id: '37297',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Mr. Raymond Abshire-Runolfsdottir',
        premium: { currency: 'USD', amount: 417.78 },
    },
    {
        id: '13979',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Ella Adams',
        premium: { currency: 'USD', amount: 537.79 },
    },
    {
        id: '17343',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Ernesto Murphy',
        premium: { currency: 'USD', amount: 1444.25 },
    },
    {
        id: '42516',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ms. Josefina Heaney',
        premium: { currency: 'USD', amount: 144.95 },
    },
    {
        id: '75897',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Andrew Yost',
        premium: { currency: 'USD', amount: 712.79 },
    },
    {
        id: '75048',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Dallas Leffler',
        premium: { currency: 'USD', amount: 287.24 },
    },
    {
        id: '40348',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Melody Kohler',
        premium: { currency: 'USD', amount: 1117.49 },
    },
    {
        id: '92776',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Angelica Okuneva',
        premium: { currency: 'USD', amount: 1611.99 },
    },
    {
        id: '93152',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Terence Wilkinson',
        premium: { currency: 'USD', amount: 328.19 },
    },
    {
        id: '44352',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jeannette Murazik Jr.',
        premium: { currency: 'USD', amount: 1126.29 },
    },
    {
        id: '41856',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Joseph Pouros',
        premium: { currency: 'USD', amount: 878.49 },
    },
    {
        id: '11633',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Rachael Weimann',
        premium: { currency: 'USD', amount: 159.07 },
    },
    {
        id: '16770',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Mrs. Marta Jacobi',
        premium: { currency: 'USD', amount: 1779.49 },
    },
    {
        id: '53601',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Alicia Larkin',
        premium: { currency: 'USD', amount: 934.49 },
    },
    {
        id: '46741',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Mr. Jose Wisoky',
        premium: { currency: 'USD', amount: 1938.25 },
    },
    {
        id: '30067',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Dr. Brent Zboncak DVM',
        premium: { currency: 'USD', amount: 1680.27 },
    },
    {
        id: '87136',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Kayla Bode Sr.',
        premium: { currency: 'USD', amount: 1923.29 },
    },
    {
        id: '92090',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Sammy Bradtke',
        premium: { currency: 'USD', amount: 1478.15 },
    },
    {
        id: '62922',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Roberto Lindgren',
        premium: { currency: 'USD', amount: 836.69 },
    },
    {
        id: '64971',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Iris Cronin',
        premium: { currency: 'USD', amount: 850.33 },
    },
    {
        id: '72384',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Cathy Morar',
        premium: { currency: 'USD', amount: 1072.09 },
    },
    {
        id: '28848',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Dana Quigley',
        premium: { currency: 'USD', amount: 294.57 },
    },
    {
        id: '82642',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Simon Deckow',
        premium: { currency: 'USD', amount: 497.66 },
    },
    {
        id: '01350',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Lynda Kuhic I',
        premium: { currency: 'USD', amount: 256.09 },
    },
    {
        id: '48722',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Alexander Ryan',
        premium: { currency: 'USD', amount: 1755.99 },
    },
    {
        id: '86848',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Tommy Ratke',
        premium: { currency: 'USD', amount: 1802.35 },
    },
    {
        id: '29232',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Ann Baumbach',
        premium: { currency: 'USD', amount: 1049.55 },
    },
    {
        id: '05452',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Conrad Bernhard',
        premium: { currency: 'USD', amount: 1159.59 },
    },
    {
        id: '11648',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Ralph Weber',
        premium: { currency: 'USD', amount: 779.45 },
    },
    {
        id: '77546',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Guadalupe Wiza IV',
        premium: { currency: 'USD', amount: 1754.39 },
    },
    {
        id: '71382',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Candice Fahey',
        premium: { currency: 'USD', amount: 812.79 },
    },
    {
        id: '08393',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Laura Leannon DVM',
        premium: { currency: 'USD', amount: 1364.65 },
    },
    {
        id: '92539',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Kari Davis Jr.',
        premium: { currency: 'USD', amount: 1697.29 },
    },
    {
        id: '15371',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Wilma Frami',
        premium: { currency: 'USD', amount: 177.35 },
    },
    {
        id: '88128',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Yvonne Turcotte',
        premium: { currency: 'USD', amount: 1976.19 },
    },
    {
        id: '60171',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Marilyn Durgan',
        premium: { currency: 'USD', amount: 854.29 },
    },
    {
        id: '12899',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Audrey Lemke',
        premium: { currency: 'USD', amount: 842.78 },
    },
    {
        id: '60012',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Rufus Klein',
        premium: { currency: 'USD', amount: 1573.35 },
    },
    {
        id: '88293',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Manuel Berge PhD',
        premium: { currency: 'USD', amount: 1443.15 },
    },
    {
        id: '80959',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Marta Witting',
        premium: { currency: 'USD', amount: 1872.65 },
    },
    {
        id: '73252',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Santos Spinka',
        premium: { currency: 'USD', amount: 578.85 },
    },
    {
        id: '45442',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Julius Douglas',
        premium: { currency: 'USD', amount: 145.99 },
    },
    {
        id: '53022',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Clay Brakus-Konopelski',
        premium: { currency: 'USD', amount: 1392.3 },
    },
    {
        id: '75387',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Levi Predovic',
        premium: { currency: 'USD', amount: 874 },
    },
    {
        id: '70048',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Elias King',
        premium: { currency: 'USD', amount: 1727.9 },
    },
    {
        id: '93273',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jeff Parisian',
        premium: { currency: 'USD', amount: 1426.99 },
    },
    {
        id: '97759',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Tyrone Trantow',
        premium: { currency: 'USD', amount: 1276.29 },
    },
    {
        id: '12809',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Kristina Huels',
        premium: { currency: 'USD', amount: 502.49 },
    },
    {
        id: '17134',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ms. Pam Schamberger',
        premium: { currency: 'USD', amount: 1350.29 },
    },
    {
        id: '47589',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Ms. Hannah Stoltenberg',
        premium: { currency: 'USD', amount: 1069.29 },
    },
    {
        id: '36187',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Douglas Pollich',
        premium: { currency: 'USD', amount: 1763.7 },
    },
    {
        id: '19671',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Mrs. Clara Ward DVM',
        premium: { currency: 'USD', amount: 1826.7 },
    },
    {
        id: '10161',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Troy Jacobs',
        premium: { currency: 'USD', amount: 772.75 },
    },
    {
        id: '27633',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Kristin Casper',
        premium: { currency: 'USD', amount: 1280.99 },
    },
    {
        id: '01165',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jeanne Heaney',
        premium: { currency: 'USD', amount: 576.99 },
    },
    {
        id: '95399',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Geoffrey Armstrong',
        premium: { currency: 'USD', amount: 1895.25 },
    },
    {
        id: '57716',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Mark Spencer',
        premium: { currency: 'USD', amount: 1343.45 },
    },
    {
        id: '09176',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jackie Schmeler',
        premium: { currency: 'USD', amount: 1122.89 },
    },
    {
        id: '09265',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Charlotte Abbott-Greenholt',
        premium: { currency: 'USD', amount: 1364.18 },
    },
    {
        id: '66756',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Harriet Frami',
        premium: { currency: 'USD', amount: 767.05 },
    },
    {
        id: '71227',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Daisy Prohaska',
        premium: { currency: 'USD', amount: 899.09 },
    },
    {
        id: '86466',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Terry Wyman',
        premium: { currency: 'USD', amount: 1627.79 },
    },
    {
        id: '66603',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Julio Gibson',
        premium: { currency: 'USD', amount: 989.65 },
    },
    {
        id: '32235',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Terrell Robel IV',
        premium: { currency: 'USD', amount: 1614.59 },
    },
    {
        id: '17839',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Daniel Ernser',
        premium: { currency: 'USD', amount: 1440.69 },
    },
    {
        id: '49849',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Sheila Becker III',
        premium: { currency: 'USD', amount: 1564.15 },
    },
    {
        id: '54624',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ashley Hermiston',
        premium: { currency: 'USD', amount: 1607.19 },
    },
    {
        id: '86135',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Phillip Will',
        premium: { currency: 'USD', amount: 469.65 },
    },
    {
        id: '47434',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Sylvia Daugherty',
        premium: { currency: 'USD', amount: 750.45 },
    },
    {
        id: '81809',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Marshall Weber',
        premium: { currency: 'USD', amount: 623.89 },
    },
    {
        id: '45949',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Mr. Roberto Paucek',
        premium: { currency: 'USD', amount: 1282.29 },
    },
    {
        id: '12930',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Stacy Bartoletti',
        premium: { currency: 'USD', amount: 1736.69 },
    },
    {
        id: '46127',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Barry Thompson',
        premium: { currency: 'USD', amount: 429.89 },
    },
    {
        id: '60328',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Lucas Leannon',
        premium: { currency: 'USD', amount: 196.55 },
    },
    {
        id: '97955',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Dr. Bryant Franey V',
        premium: { currency: 'USD', amount: 409.99 },
    },
    {
        id: '36518',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Miriam Wyman',
        premium: { currency: 'USD', amount: 435.55 },
    },
    {
        id: '50622',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Tanya Gutkowski-Dibbert',
        premium: { currency: 'USD', amount: 1400.85 },
    },
    {
        id: '16533',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Betsy Ortiz',
        premium: { currency: 'USD', amount: 1756.25 },
    },
    {
        id: '78088',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Orlando Reilly-Wilderman I',
        premium: { currency: 'USD', amount: 477.71 },
    },
    {
        id: '49901',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Vicky Feil',
        premium: { currency: 'USD', amount: 1978.45 },
    },
    {
        id: '83313',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Dr. Dorothy Schamberger',
        premium: { currency: 'USD', amount: 1922.1 },
    },
    {
        id: '86698',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Carroll Tillman',
        premium: { currency: 'USD', amount: 1738.49 },
    },
    {
        id: '26873',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Fred Harber',
        premium: { currency: 'USD', amount: 686.29 },
    },
    {
        id: '59745',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Elena Christiansen',
        premium: { currency: 'USD', amount: 1991.15 },
    },
    {
        id: '73463',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Diana Kunze',
        premium: { currency: 'USD', amount: 305.59 },
    },
    {
        id: '86417',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Deanna Zemlak DVM',
        premium: { currency: 'USD', amount: 1814.99 },
    },
    {
        id: '30873',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Tonya Hermann',
        premium: { currency: 'USD', amount: 1836.05 },
    },
    {
        id: '45237',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Bernadette Strosin',
        premium: { currency: 'USD', amount: 1669.55 },
    },
    {
        id: '14011',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Bernadette Corwin',
        premium: { currency: 'USD', amount: 214.75 },
    },
    {
        id: '28450',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Mrs. Yvette Cummerata MD',
        premium: { currency: 'USD', amount: 1352.15 },
    },
    {
        id: '52767',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Darrin Smith',
        premium: { currency: 'USD', amount: 1029.55 },
    },
    {
        id: '35993',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Micheal Hackett',
        premium: { currency: 'USD', amount: 1433.69 },
    },
    {
        id: '26705',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Kim Pfeffer',
        premium: { currency: 'USD', amount: 1035.59 },
    },
    {
        id: '24670',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Cindy Botsford',
        premium: { currency: 'USD', amount: 1759.75 },
    },
    {
        id: '49540',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Melanie Altenwerth',
        premium: { currency: 'USD', amount: 438.99 },
    },
    {
        id: '46220',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Edwin Shields-Rice DDS',
        premium: { currency: 'USD', amount: 595.39 },
    },
    {
        id: '63936',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Rene Jaskolski',
        premium: { currency: 'USD', amount: 1445.09 },
    },
    {
        id: '00820',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Stacy Sporer Sr.',
        premium: { currency: 'USD', amount: 1461.15 },
    },
    {
        id: '08657',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Eileen Turcotte',
        premium: { currency: 'USD', amount: 1132.79 },
    },
    {
        id: '87687',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jordan Strosin',
        premium: { currency: 'USD', amount: 1946.7 },
    },
    {
        id: '36269',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Tracey Weissnat',
        premium: { currency: 'USD', amount: 1255.23 },
    },
    {
        id: '86888',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Pam Feil',
        premium: { currency: 'USD', amount: 435.57 },
    },
    {
        id: '78613',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Alton Dibbert',
        premium: { currency: 'USD', amount: 1242.79 },
    },
    {
        id: '96941',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Mrs. Melinda Roberts',
        premium: { currency: 'USD', amount: 1374.9 },
    },
    {
        id: '57810',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Lynn Shanahan',
        premium: { currency: 'USD', amount: 1965.29 },
    },
    {
        id: '70850',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Yvette Bergnaum Jr.',
        premium: { currency: 'USD', amount: 1234.35 },
    },
    {
        id: '95470',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Priscilla Oberbrunner',
        premium: { currency: 'USD', amount: 515.7 },
    },
    {
        id: '48161',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Glen Aufderhar',
        premium: { currency: 'USD', amount: 529.25 },
    },
    {
        id: '73098',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Salvador Krajcik',
        premium: { currency: 'USD', amount: 226.25 },
    },
    {
        id: '48041',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Mr. Dean Ritchie',
        premium: { currency: 'USD', amount: 707.39 },
    },
    {
        id: '32564',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Irving Kuhn',
        premium: { currency: 'USD', amount: 1327.29 },
    },
    {
        id: '10361',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Lauren Cruickshank',
        premium: { currency: 'USD', amount: 467.25 },
    },
    {
        id: '33124',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Angel Huels-Senger',
        premium: { currency: 'USD', amount: 681.45 },
    }
];

Implementación de componentes

PaginationAsyncTanstack.tsx

import React, { useId, useState } from 'react';
import {
    flexRender,
    getCoreRowModel,
    getPaginationRowModel,
    useReactTable,
} from '@tanstack/react-table';

import {
    BodyCell,
    BodyRow,
    HeaderCell,
    HeaderRow,
    Pagination,
    Table,
    TableBody,
    TableHeader,
    TableLoader,
    Typography,
} from '@jutro/components';
import type { PaginationProps, TableProps } from '@jutro/components';
import type { ColumnDef, RowData } from '@tanstack/react-table';
import { TableMockData, tableMockData } from './table.mockdata';
import { simulateAsyncFetch } from './simulateAsyncFetch';

type TableStoryProps = TableProps & {
    onActionClick: (actionName: string, param?: unknown) => void;
};

/** Tanstack Table module augmentation to extend ColumnMeta interface with alignment and aria-label properties. */
declare module '@tanstack/react-table' {
    interface ColumnMeta<TData extends RowData, TValue> {
        align?: 'left' | 'right' | 'center';
        ariaLabel?: string;
    }
}

/** Column configuration for the table with Product, Insured, and Premium columns. */
export const columns: ColumnDef<TableMockData, any>[] = [
    {
        id: 'product',
        header: () => (
            <Typography variant="heading-5" tag="span">
                Product
            </Typography>
        ),
        cell: props => <Typography>{props.getValue()}</Typography>,
        accessorFn: row => row.product.name,
        meta: {
            ariaLabel: 'Product',
        },
    },
    {
        id: 'insured',
        header: () => (
            <Typography variant="heading-5" tag="span">
                Insured
            </Typography>
        ),
        cell: props => <Typography>{props.getValue()}</Typography>,
        accessorKey: 'insured',
        meta: {
            ariaLabel: 'Insured',
        },
    },
    {
        id: 'premium',
        header: () => (
            <Typography variant="heading-5" tag="span">
                Premium
            </Typography>
        ),
        cell: props => <Typography>{props.getValue()}</Typography>,
        accessorFn: row =>
            `${row.premium.currency} ${row.premium.amount?.toFixed(2)}`,
        meta: {
            align: 'right',
            ariaLabel: 'Premium',
        },
    },
];

export const TableTitleString = 'Policy list';

/** Component that renders a table title section with heading and subtitle. */
export const TableTitle: React.FC<{ tableId: string }> = ({ tableId }) => (
    <div>
        <div>
            <Typography variant="heading-2" id={tableId}>
                {TableTitleString}
            </Typography>
            <Typography role="doc-subtitle">
                Detailed record of individual policies
            </Typography>
        </div>
    </div>
);

const TABLE_PAGE_SIZE_DEFAULT = 10;

export function PaginationAsyncTanstackStory(
    args: TableStoryProps & PaginationProps
): React.ReactElement {

    const tableId = useId();

    // Provide default values for callback props
    const {
        onPageIndexChange: argsOnPageIndexChange = () => {},
        onPageSizeChange: argsOnPageSizeChange = () => {},
    } = args;

    const [loading, setLoading] = useState(false);

    const table = useReactTable({
        data: tableMockData,
        columns,
        initialState: {
            pagination: {
                pageIndex: 0,
                pageSize: TABLE_PAGE_SIZE_DEFAULT,
            },
        },
        getCoreRowModel: getCoreRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
    });

    const handlePageIndexChange = (newPageIndex: number) => {
        argsOnPageIndexChange(newPageIndex);
        table.setPageIndex(newPageIndex);
    };

    const handlePageSizeChange = (newPageSize: number) => {
        argsOnPageSizeChange(newPageSize);
        table.setPageSize(newPageSize);
        table.setPageIndex(0);
    };

    return (
        <div>
            <TableTitle tableId={tableId} />
            <Table
                noStripedRows={args.noStripedRows}
                className={args.className}
                aria-labelledby={tableId}
                aria-busy={loading ? 'true' : 'false'}
                aria-live="polite"
            >
                <TableHeader>
                    {table.getHeaderGroups().map(headerGroup => (
                        <HeaderRow key={headerGroup.id}>
                            {headerGroup.headers.map((header, columnIndex) => (
                                <HeaderCell
                                    key={header.id}
                                    columnIndex={columnIndex}
                                    align={header.column.columnDef.meta?.align}
                                >
                                    {flexRender(
                                        header.column.columnDef.header,
                                        header.getContext()
                                    )}
                                </HeaderCell>
                            ))}
                        </HeaderRow>
                    ))}
                </TableHeader>
                <TableBody>
                    {loading ? (
                        <TableLoader />
                    ) : (
                        table.getRowModel().rows.map((row, rowIndex) => (
                            <BodyRow key={row.id}>
                                {row
                                    .getVisibleCells()
                                    .map((cell, columnIndex) => (
                                        <BodyCell
                                            key={cell.id}
                                            rowIndex={rowIndex}
                                            columnIndex={columnIndex}
                                            align={
                                                cell.column.columnDef.meta
                                                    ?.align
                                            }
                                        >
                                            {flexRender(
                                                cell.column.columnDef.cell,
                                                cell.getContext()
                                            )}
                                        </BodyCell>
                                    ))}
                            </BodyRow>
                        ))
                    )}
                </TableBody>
            </Table>
            <Pagination
                currentPageIndex={table.getState().pagination.pageIndex}
                pageSize={table.getState().pagination.pageSize}
                totalRows={table.getPrePaginationRowModel().rows.length}
                pageSizeOptions={args.pageSizeOptions}
                onPageIndexChange={simulateAsyncFetch(handlePageIndexChange, {
                    setLoading,
                })}
                onPageSizeChange={simulateAsyncFetch(handlePageSizeChange, {
                    setLoading,
                })}
                aria-label={`${TableTitleString} pagination`}
                disabled={args.disabled || loading}
            />
        </div>
    );
}

Administración de los datos

simulateAsyncFetch.ts

const WAIT_TIME = 400;

type SimulateAsyncFetchOptions = {
    setLoading?: (value: boolean) => void;
    delay?: number;
};

export function simulateAsyncFetch<T extends unknown[], R>(
    callback: (...args: T) => R | Promise<R>,
    options?: SimulateAsyncFetchOptions
): (...args: T) => Promise<R> {
    let timer: number | null = null;

    return async (...args: T): Promise<R> => {
        options?.setLoading?.(true);

        try {
            return await callback(...args);
        } finally {
            if (timer) {
                clearTimeout(timer);
            }

            timer = window.setTimeout(
                () => options?.setLoading?.(false),
                options?.delay || WAIT_TIME
            );
        }
    };
}

table.mockdata.ts

import type { CurrencyInputProps } from '@jutro/components';

export type TableMockDataProduct = {
    name: string;
};

export type TableMockDataCurrency = NonNullable<CurrencyInputProps['value']>;

export type TableMockData = {
    id: string;
    product: TableMockDataProduct;
    insured: string;
    premium: TableMockDataCurrency;
};

export const tableMockData: Array<TableMockData> = [
    {
        id: '73065',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Marshall Rogahn',
        premium: { currency: 'USD', amount: 1236.39 },
    },
    {
        id: '80077',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'April Kub',
        premium: { currency: 'USD', amount: 173.99 },
    },
    {
        id: '64487',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Abel Rippin',
        premium: { currency: 'USD', amount: 1228.69 },
    },
    {
        id: '12345',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'John Smith',
        premium: { currency: 'USD', amount: 892.45 },
    },
    {
        id: '23456',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Sarah Johnson',
        premium: { currency: 'USD', amount: 567.23 },
    },
    {
        id: '34567',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Michael Brown',
        premium: { currency: 'USD', amount: 445.67 },
    },
    {
        id: '45678',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Emily Davis',
        premium: { currency: 'USD', amount: 2134.89 },
    },
    {
        id: '56789',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'David Wilson',
        premium: { currency: 'USD', amount: 823.45 },
    },
    {
        id: '67890',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Jessica Miller',
        premium: { currency: 'USD', amount: 298.76 },
    },
    {
        id: '78901',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Christopher Taylor',
        premium: { currency: 'USD', amount: 3456.78 },
    },
    {
        id: '37586',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Pamela Heller',
        premium: { currency: 'USD', amount: 1947.5 },
    },
    {
        id: '32975',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Mr. Mike Stehr',
        premium: { currency: 'USD', amount: 340.39 },
    },
    {
        id: '56789',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Katie Ankunding',
        premium: { currency: 'USD', amount: 430.25 },
    },
    {
        id: '44320',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Dawn Hermiston',
        premium: { currency: 'USD', amount: 794.35 },
    },
    {
        id: '05401',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Erika Turner',
        premium: { currency: 'USD', amount: 156.69 },
    },
    {
        id: '53420',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Harold Leannon',
        premium: { currency: 'USD', amount: 255.29 },
    },
    {
        id: '05681',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jeffery Mills',
        premium: { currency: 'USD', amount: 502.69 },
    },
    {
        id: '97696',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Theresa Bernier',
        premium: { currency: 'USD', amount: 1580.49 },
    },
    {
        id: '70782',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Ms. Danielle Kuhic',
        premium: { currency: 'USD', amount: 1821.85 },
    },
    {
        id: '35800',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Sidney Raynor',
        premium: { currency: 'USD', amount: 447.8 },
    },
    {
        id: '93190',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Marcella Heaney',
        premium: { currency: 'USD', amount: 524.29 },
    },
    {
        id: '71208',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Bernard Torp',
        premium: { currency: 'USD', amount: 130.89 },
    },
    {
        id: '35905',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ebony Thompson',
        premium: { currency: 'USD', amount: 1960.29 },
    },
    {
        id: '52899',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Jackie Lehner',
        premium: { currency: 'USD', amount: 1971.19 },
    },
    {
        id: '34985',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Oliver Lynch',
        premium: { currency: 'USD', amount: 244.45 },
    },
    {
        id: '23141',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Darnell Roob-Connelly',
        premium: { currency: 'USD', amount: 1203.59 },
    },
    {
        id: '80844',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Belinda Hintz',
        premium: { currency: 'USD', amount: 1436.89 },
    },
    {
        id: '93284',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Miss Shelley Gibson',
        premium: { currency: 'USD', amount: 1241.85 },
    },
    {
        id: '25834',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Suzanne Schuster',
        premium: { currency: 'USD', amount: 528.29 },
    },
    {
        id: '31574',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Jason DuBuque Jr.',
        premium: { currency: 'USD', amount: 1749.69 },
    },
    {
        id: '20234',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Bonnie Carter',
        premium: { currency: 'USD', amount: 989.79 },
    },
    {
        id: '62358',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ismael Carter-Weber',
        premium: { currency: 'USD', amount: 1344.29 },
    },
    {
        id: '79336',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Myra Jast',
        premium: { currency: 'USD', amount: 959.55 },
    },
    {
        id: '26031',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Ms. Estelle Kunde',
        premium: { currency: 'USD', amount: 262.79 },
    },
    {
        id: '98761',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Juana Green III',
        premium: { currency: 'USD', amount: 1324.5 },
    },
    {
        id: '65487',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Melissa Bahringer',
        premium: { currency: 'USD', amount: 1974.29 },
    },
    {
        id: '11811',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Doyle Aufderhar',
        premium: { currency: 'USD', amount: 838.29 },
    },
    {
        id: '77339',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Tonya Gibson',
        premium: { currency: 'USD', amount: 1644 },
    },
    {
        id: '21024',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Edmond Osinski',
        premium: { currency: 'USD', amount: 170.09 },
    },
    {
        id: '94991',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Debbie Tillman MD',
        premium: { currency: 'USD', amount: 1072.89 },
    },
    {
        id: '37297',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Mr. Raymond Abshire-Runolfsdottir',
        premium: { currency: 'USD', amount: 417.78 },
    },
    {
        id: '13979',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Ella Adams',
        premium: { currency: 'USD', amount: 537.79 },
    },
    {
        id: '17343',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Ernesto Murphy',
        premium: { currency: 'USD', amount: 1444.25 },
    },
    {
        id: '42516',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ms. Josefina Heaney',
        premium: { currency: 'USD', amount: 144.95 },
    },
    {
        id: '75897',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Andrew Yost',
        premium: { currency: 'USD', amount: 712.79 },
    },
    {
        id: '75048',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Dallas Leffler',
        premium: { currency: 'USD', amount: 287.24 },
    },
    {
        id: '40348',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Melody Kohler',
        premium: { currency: 'USD', amount: 1117.49 },
    },
    {
        id: '92776',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Angelica Okuneva',
        premium: { currency: 'USD', amount: 1611.99 },
    },
    {
        id: '93152',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Terence Wilkinson',
        premium: { currency: 'USD', amount: 328.19 },
    },
    {
        id: '44352',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jeannette Murazik Jr.',
        premium: { currency: 'USD', amount: 1126.29 },
    },
    {
        id: '41856',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Joseph Pouros',
        premium: { currency: 'USD', amount: 878.49 },
    },
    {
        id: '11633',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Rachael Weimann',
        premium: { currency: 'USD', amount: 159.07 },
    },
    {
        id: '16770',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Mrs. Marta Jacobi',
        premium: { currency: 'USD', amount: 1779.49 },
    },
    {
        id: '53601',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Alicia Larkin',
        premium: { currency: 'USD', amount: 934.49 },
    },
    {
        id: '46741',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Mr. Jose Wisoky',
        premium: { currency: 'USD', amount: 1938.25 },
    },
    {
        id: '30067',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Dr. Brent Zboncak DVM',
        premium: { currency: 'USD', amount: 1680.27 },
    },
    {
        id: '87136',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Kayla Bode Sr.',
        premium: { currency: 'USD', amount: 1923.29 },
    },
    {
        id: '92090',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Sammy Bradtke',
        premium: { currency: 'USD', amount: 1478.15 },
    },
    {
        id: '62922',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Roberto Lindgren',
        premium: { currency: 'USD', amount: 836.69 },
    },
    {
        id: '64971',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Iris Cronin',
        premium: { currency: 'USD', amount: 850.33 },
    },
    {
        id: '72384',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Cathy Morar',
        premium: { currency: 'USD', amount: 1072.09 },
    },
    {
        id: '28848',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Dana Quigley',
        premium: { currency: 'USD', amount: 294.57 },
    },
    {
        id: '82642',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Simon Deckow',
        premium: { currency: 'USD', amount: 497.66 },
    },
    {
        id: '01350',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Lynda Kuhic I',
        premium: { currency: 'USD', amount: 256.09 },
    },
    {
        id: '48722',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Alexander Ryan',
        premium: { currency: 'USD', amount: 1755.99 },
    },
    {
        id: '86848',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Tommy Ratke',
        premium: { currency: 'USD', amount: 1802.35 },
    },
    {
        id: '29232',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Ann Baumbach',
        premium: { currency: 'USD', amount: 1049.55 },
    },
    {
        id: '05452',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Conrad Bernhard',
        premium: { currency: 'USD', amount: 1159.59 },
    },
    {
        id: '11648',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Ralph Weber',
        premium: { currency: 'USD', amount: 779.45 },
    },
    {
        id: '77546',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Guadalupe Wiza IV',
        premium: { currency: 'USD', amount: 1754.39 },
    },
    {
        id: '71382',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Candice Fahey',
        premium: { currency: 'USD', amount: 812.79 },
    },
    {
        id: '08393',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Laura Leannon DVM',
        premium: { currency: 'USD', amount: 1364.65 },
    },
    {
        id: '92539',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Kari Davis Jr.',
        premium: { currency: 'USD', amount: 1697.29 },
    },
    {
        id: '15371',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Wilma Frami',
        premium: { currency: 'USD', amount: 177.35 },
    },
    {
        id: '88128',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Yvonne Turcotte',
        premium: { currency: 'USD', amount: 1976.19 },
    },
    {
        id: '60171',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Marilyn Durgan',
        premium: { currency: 'USD', amount: 854.29 },
    },
    {
        id: '12899',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Audrey Lemke',
        premium: { currency: 'USD', amount: 842.78 },
    },
    {
        id: '60012',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Rufus Klein',
        premium: { currency: 'USD', amount: 1573.35 },
    },
    {
        id: '88293',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Manuel Berge PhD',
        premium: { currency: 'USD', amount: 1443.15 },
    },
    {
        id: '80959',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Marta Witting',
        premium: { currency: 'USD', amount: 1872.65 },
    },
    {
        id: '73252',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Santos Spinka',
        premium: { currency: 'USD', amount: 578.85 },
    },
    {
        id: '45442',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Julius Douglas',
        premium: { currency: 'USD', amount: 145.99 },
    },
    {
        id: '53022',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Clay Brakus-Konopelski',
        premium: { currency: 'USD', amount: 1392.3 },
    },
    {
        id: '75387',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Levi Predovic',
        premium: { currency: 'USD', amount: 874 },
    },
    {
        id: '70048',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Elias King',
        premium: { currency: 'USD', amount: 1727.9 },
    },
    {
        id: '93273',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jeff Parisian',
        premium: { currency: 'USD', amount: 1426.99 },
    },
    {
        id: '97759',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Tyrone Trantow',
        premium: { currency: 'USD', amount: 1276.29 },
    },
    {
        id: '12809',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Kristina Huels',
        premium: { currency: 'USD', amount: 502.49 },
    },
    {
        id: '17134',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ms. Pam Schamberger',
        premium: { currency: 'USD', amount: 1350.29 },
    },
    {
        id: '47589',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Ms. Hannah Stoltenberg',
        premium: { currency: 'USD', amount: 1069.29 },
    },
    {
        id: '36187',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Douglas Pollich',
        premium: { currency: 'USD', amount: 1763.7 },
    },
    {
        id: '19671',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Mrs. Clara Ward DVM',
        premium: { currency: 'USD', amount: 1826.7 },
    },
    {
        id: '10161',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Troy Jacobs',
        premium: { currency: 'USD', amount: 772.75 },
    },
    {
        id: '27633',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Kristin Casper',
        premium: { currency: 'USD', amount: 1280.99 },
    },
    {
        id: '01165',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jeanne Heaney',
        premium: { currency: 'USD', amount: 576.99 },
    },
    {
        id: '95399',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Geoffrey Armstrong',
        premium: { currency: 'USD', amount: 1895.25 },
    },
    {
        id: '57716',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Mark Spencer',
        premium: { currency: 'USD', amount: 1343.45 },
    },
    {
        id: '09176',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jackie Schmeler',
        premium: { currency: 'USD', amount: 1122.89 },
    },
    {
        id: '09265',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Charlotte Abbott-Greenholt',
        premium: { currency: 'USD', amount: 1364.18 },
    },
    {
        id: '66756',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Harriet Frami',
        premium: { currency: 'USD', amount: 767.05 },
    },
    {
        id: '71227',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Daisy Prohaska',
        premium: { currency: 'USD', amount: 899.09 },
    },
    {
        id: '86466',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Terry Wyman',
        premium: { currency: 'USD', amount: 1627.79 },
    },
    {
        id: '66603',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Julio Gibson',
        premium: { currency: 'USD', amount: 989.65 },
    },
    {
        id: '32235',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Terrell Robel IV',
        premium: { currency: 'USD', amount: 1614.59 },
    },
    {
        id: '17839',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Daniel Ernser',
        premium: { currency: 'USD', amount: 1440.69 },
    },
    {
        id: '49849',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Sheila Becker III',
        premium: { currency: 'USD', amount: 1564.15 },
    },
    {
        id: '54624',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Ashley Hermiston',
        premium: { currency: 'USD', amount: 1607.19 },
    },
    {
        id: '86135',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Phillip Will',
        premium: { currency: 'USD', amount: 469.65 },
    },
    {
        id: '47434',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Sylvia Daugherty',
        premium: { currency: 'USD', amount: 750.45 },
    },
    {
        id: '81809',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Marshall Weber',
        premium: { currency: 'USD', amount: 623.89 },
    },
    {
        id: '45949',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Mr. Roberto Paucek',
        premium: { currency: 'USD', amount: 1282.29 },
    },
    {
        id: '12930',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Stacy Bartoletti',
        premium: { currency: 'USD', amount: 1736.69 },
    },
    {
        id: '46127',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Barry Thompson',
        premium: { currency: 'USD', amount: 429.89 },
    },
    {
        id: '60328',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Lucas Leannon',
        premium: { currency: 'USD', amount: 196.55 },
    },
    {
        id: '97955',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Dr. Bryant Franey V',
        premium: { currency: 'USD', amount: 409.99 },
    },
    {
        id: '36518',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Miriam Wyman',
        premium: { currency: 'USD', amount: 435.55 },
    },
    {
        id: '50622',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Tanya Gutkowski-Dibbert',
        premium: { currency: 'USD', amount: 1400.85 },
    },
    {
        id: '16533',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Betsy Ortiz',
        premium: { currency: 'USD', amount: 1756.25 },
    },
    {
        id: '78088',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Orlando Reilly-Wilderman I',
        premium: { currency: 'USD', amount: 477.71 },
    },
    {
        id: '49901',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Vicky Feil',
        premium: { currency: 'USD', amount: 1978.45 },
    },
    {
        id: '83313',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Dr. Dorothy Schamberger',
        premium: { currency: 'USD', amount: 1922.1 },
    },
    {
        id: '86698',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Carroll Tillman',
        premium: { currency: 'USD', amount: 1738.49 },
    },
    {
        id: '26873',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Fred Harber',
        premium: { currency: 'USD', amount: 686.29 },
    },
    {
        id: '59745',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Elena Christiansen',
        premium: { currency: 'USD', amount: 1991.15 },
    },
    {
        id: '73463',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Diana Kunze',
        premium: { currency: 'USD', amount: 305.59 },
    },
    {
        id: '86417',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Deanna Zemlak DVM',
        premium: { currency: 'USD', amount: 1814.99 },
    },
    {
        id: '30873',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Tonya Hermann',
        premium: { currency: 'USD', amount: 1836.05 },
    },
    {
        id: '45237',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Bernadette Strosin',
        premium: { currency: 'USD', amount: 1669.55 },
    },
    {
        id: '14011',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Bernadette Corwin',
        premium: { currency: 'USD', amount: 214.75 },
    },
    {
        id: '28450',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Mrs. Yvette Cummerata MD',
        premium: { currency: 'USD', amount: 1352.15 },
    },
    {
        id: '52767',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Darrin Smith',
        premium: { currency: 'USD', amount: 1029.55 },
    },
    {
        id: '35993',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Micheal Hackett',
        premium: { currency: 'USD', amount: 1433.69 },
    },
    {
        id: '26705',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Kim Pfeffer',
        premium: { currency: 'USD', amount: 1035.59 },
    },
    {
        id: '24670',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Cindy Botsford',
        premium: { currency: 'USD', amount: 1759.75 },
    },
    {
        id: '49540',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Melanie Altenwerth',
        premium: { currency: 'USD', amount: 438.99 },
    },
    {
        id: '46220',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Edwin Shields-Rice DDS',
        premium: { currency: 'USD', amount: 595.39 },
    },
    {
        id: '63936',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Rene Jaskolski',
        premium: { currency: 'USD', amount: 1445.09 },
    },
    {
        id: '00820',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Stacy Sporer Sr.',
        premium: { currency: 'USD', amount: 1461.15 },
    },
    {
        id: '08657',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Eileen Turcotte',
        premium: { currency: 'USD', amount: 1132.79 },
    },
    {
        id: '87687',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Jordan Strosin',
        premium: { currency: 'USD', amount: 1946.7 },
    },
    {
        id: '36269',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Tracey Weissnat',
        premium: { currency: 'USD', amount: 1255.23 },
    },
    {
        id: '86888',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Pam Feil',
        premium: { currency: 'USD', amount: 435.57 },
    },
    {
        id: '78613',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Alton Dibbert',
        premium: { currency: 'USD', amount: 1242.79 },
    },
    {
        id: '96941',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Mrs. Melinda Roberts',
        premium: { currency: 'USD', amount: 1374.9 },
    },
    {
        id: '57810',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Lynn Shanahan',
        premium: { currency: 'USD', amount: 1965.29 },
    },
    {
        id: '70850',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Yvette Bergnaum Jr.',
        premium: { currency: 'USD', amount: 1234.35 },
    },
    {
        id: '95470',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Priscilla Oberbrunner',
        premium: { currency: 'USD', amount: 515.7 },
    },
    {
        id: '48161',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Glen Aufderhar',
        premium: { currency: 'USD', amount: 529.25 },
    },
    {
        id: '73098',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Salvador Krajcik',
        premium: { currency: 'USD', amount: 226.25 },
    },
    {
        id: '48041',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Mr. Dean Ritchie',
        premium: { currency: 'USD', amount: 707.39 },
    },
    {
        id: '32564',
        product: {
            name: 'Go Commercial Auto',
        },
        insured: 'Irving Kuhn',
        premium: { currency: 'USD', amount: 1327.29 },
    },
    {
        id: '10361',
        product: {
            name: 'Go Worker\'s Compensation',
        },
        insured: 'Lauren Cruickshank',
        premium: { currency: 'USD', amount: 467.25 },
    },
    {
        id: '33124',
        product: {
            name: 'USA Personal Auto',
        },
        insured: 'Angel Huels-Senger',
        premium: { currency: 'USD', amount: 681.45 },
    }
];

Registro de cambios

10.12.0

Se introdujo el componente @jutro/components/Pagination.