Pagination de table

Pagination de table dans Storybook

Utilisation

Présentation

La pagination permet aux utilisateurs de naviguer dans de grands ensembles de données en divisant le contenu en pages gérables. Elle fournit des commandes permettant de parcourir les pages et d’ajuster le nombre d’éléments affichés en même temps, ce qui est essentiel pour maintenir les performances et la lisibilité dans les applications gourmandes en données.

Quand l'utiliser

• Pour gérer des ensembles de données volumineux : utilisez cette fonction lorsqu’une table comporte des centaines ou des milliers de lignes et que leur affichage simultané a un impact sur les performances ou le temps de chargement des pages.
• Pour améliorer la lisibilité : utilisez cette fonction lorsqu'une trop grande quantité de données sur une page submerge les utilisateurs, ce qui rend plus difficile la recherche ou la comparaison des valeurs.
• Pour améliorer l’accessibilité : utilisez cette fonction lorsque les tables volumineuses génèrent des problèmes de navigation pour les lecteurs d’écran ou les utilisateurs du clavier (par exemple, une table comportant des centaines de lignes n’est pas pratique à explorer).
• Pour exploiter les vues filtrées : utilisez cette fonction lorsque les utilisateurs consultent généralement un sous-ensemble de données, comme des résultats de recherche ou des vues filtrées. La pagination permet de les guider et facilite la gestion des blocs.

Quand ne pas l'utiliser

• Pour les petits ensembles de données : évitez cette fonction si toutes les lignes peuvent être affichées sans problèmes de performances ou sans surcharger l’utilisateur (par exemple, 20 à 50 lignes).
• Pour les tâches de comparaison de grande ampleur : évitez cette fonction lorsque les utilisateurs doivent comparer plusieurs lignes à la fois ; envisagez plutôt le défilement virtuel ou les vues filtrées.
• Pour les tâches reposant sur une vue unique : n’utilisez pas cette fonction si l’ensemble de données représente un ensemble complet qui ne peut pas être réparti sur plusieurs pages, comme une table de paramètres.

Formatage

Structure

Le composant de pagination apparaît au bas du contenu qu’il contrôle et se compose des éléments suivants :

1. Sélection des lignes par page : liste déroulante qui permet aux utilisateurs de modifier le nombre d’éléments affichés sur chaque page.
2. Affichage de la plage d’éléments : étiquette de texte qui indique les éléments actuellement affichés dans le contexte du nombre total d’éléments (par exemple, « 1 - 10 sur 25 »).
3. Commandes de navigation : boutons avec icônes permettant aux utilisateurs de passer à la page de données précédente ou suivante, ainsi qu’à la première et à la dernière page.

Contenu

Directives générales relatives à la rédaction

• Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
• Utilisez des verbes au présent et la forme active dans la plupart des cas.
• Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
• Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
• Utilisez des termes et des phrases concis.

Comportements

États

Les principaux états du composant de pagination sont liés à ses commandes de navigation.

• Le bouton Page précédente doit être désactivé lorsque l’utilisateur se trouve sur la première page de données.
• Le bouton Page suivante doit être désactivé lorsque l’utilisateur se trouve sur la dernière page de données.

Interactions

• La sélection d’une nouvelle valeur dans la liste déroulante Lignes par page recharge le composant associé pour afficher le nombre d’éléments choisi.
• En cliquant sur les boutons Page suivante ou Page précédente, l’utilisateur navigue dans l’ensemble de données, une page à la fois.

Approches en termes d’utilisation de la pagination

• Utilisation par défaut : utilisez le composant dans un contexte synchrone standard. Les clients fournissent les valeurs directement au composant.
• Utilisation avec des tables asynchrones : lorsqu’elle est utilisée avec des tables qui récupèrent des données de manière asynchrone auprès d’un serveur, la pagination reflète l’état actuel de la table. Le composant lui-même reste synchrone ; la table gère la logique asynchrone. Cette approche s’applique à la fois à l’utilisation par défaut et à l’utilisation de TanStack Table.
• Utilisation de TanStack Table : lors de l’utilisation d’une table gérée par TanStack Table, l’utilisateur transmet l’état de pagination de la table au composant de pagination. Cela permet à l’interface utilisateur de pagination de refléter l’état actuel de la table, y compris les mises à jour asynchrones ou pilotées par le serveur gérées par la table.

Accessibilité

Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :

• Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
• Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
• Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
• Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.

La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.

Lorsque vous utilisez ce composant dans votre application, respectez les meilleures pratiques suivantes :

• Interaction avec le clavier : tous les contrôles du composant de pagination doivent être accessibles et activables au clavier. Les utilisateurs doivent pouvoir naviguer entre les boutons déroulants et de navigation à l’aide de la touche Tab et les activer à l’aide des touches Enter ou Space.
• Lecteur d’écran : le composant de pagination doit être enveloppé dans un élément <nav> avec un élément aria-label de type « pagination » pour l’identifier comme une région de repérage. Tous les contrôles doivent avoir des noms clairs et accessibles. Pour les boutons de navigation, utilisez des attributs aria-label tels que « Aller à la page précédente » et « Passer à la page suivante ». L’affichage de la plage d’éléments (par exemple, « 1 - 10 sur 25 ») doit être associé par programmation aux commandes afin qu’il puisse être annoncé aux utilisateurs de lecteurs d’écran et fournir ainsi un contexte essentiel pour la navigation.

Code

<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}
/>

Consultez la section Exemples pour obtenir des exemples de code complets illustrant diverses implémentations de pagination.

Instruction d'importation

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

Cahier des charges du composant

Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.

Propriétés

currentPageIndexobligatoire

Type

number

Description

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

Valeur par défaut

0

onPageIndexChangeobligatoire

Type

(newPageIndex: number) => void

Description

Callback function that is invoked when the page index changes.

onPageSizeChangeobligatoire

Type

(newPageSize: number) => void

Description

Callback function that is invoked when the page size changes.

totalRowsobligatoire

Type

number

Description

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

disabled

Type

boolean

Description

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

Valeur par défaut

false

pageSize

Type

number

Description

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

Valeur par défaut

10

pageSizeOptions

Type

number[]

Description

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

Valeur par défaut

[10, 25, 50]

Crochets

Aucun crochet n'est disponible pour Pagination.

Clés de traduction

Il n'existe aucune traduction pour Pagination.

Pour en savoir plus sur la gestion des traductions, reportez-vous à notre section sur l'internationalisation.

Portes de sortie

Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.

Exemples

Le composant Table fournit une fonctionnalité de pagination complète en utilisant uniquement des composants Jutro. Pour les cas d’utilisation avancés ou les intégrations existantes, vous pouvez éventuellement exploiter des bibliothèques externes telles que Tanstack Table pour gérer certaines parties de la logique de gestion des données.

Vous pouvez passer en revue deux types d’exemples de code pour la pagination de table qui montrent l’utilisation des composants Jutro uniquement et l’utilisation de TanStack Table pour une partie de la logique de gestion des données. Les exemples contiennent tous les fichiers dont vous avez besoin pour les exécuter dans votre environnement, tels que les crochets et les données fictives. Chaque exemple dispose d’un ensemble de fichiers différent.

Consultez la section Utilisation pour découvrir comment concevoir correctement une table et connaître les différentes options de configuration que nous proposons.

Implémentation de la pagination de base

Pour implémenter la pagination avec le composant de table, combinez les composants Table et Pagination avec une couche de gestion des données telle qu’un crochet personnalisé qui gère l’état de pagination.

Le composant de pagination a besoin des propriétés currentPageIndex et totalRows pour afficher l’état correct, ainsi que des rappels onPageIndexChange et onPageSizeChange pour gérer les interactions utilisateur. Vous pouvez gérer les modifications de page en mettant à jour l’état des données et en réinitialisant la première page lorsque la taille de la page change pour vous assurer que les utilisateurs ne se retrouvent pas sur des pages vides.

Utilisez une couche de gestion des données (telle que le crochet personnalisé useTableData) pour fractionner votre ensemble de données en fonction de la page et de la taille de page en cours, puis transmettez les données paginées aux lignes de votre table.

Vous pouvez également utiliser TanStack Table comme couche de gestion des données, qui fournit une gestion intégrée de l’état de pagination et gère automatiquement les calculs de page via son crochet useReactTable.

Accessibilité

Le composant de pagination doit être placé sous la table avec un élément aria-label approprié qui fait référence au titre de la table pour l’accessibilité. Transmettez la chaîne traduite du composant de titre de table avec un suffixe « pagination » à la propriété aria-label du composant Pagination.

Implémentation des composants

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>
    );
}

Gestion des données

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 },
    }
];

Implémentation des composants

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>
    );
}

Gestion des données

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 },
    }
];

Implémentation de la pagination asynchrone

Cet exemple illustre la pagination avec des opérations asynchrones simulées, par exemple lorsque des données doivent être extraites d’un serveur. Contrairement à l’exemple de pagination de base qui traite les données de manière synchrone, cette implémentation ajoute un état de chargement et simule les retards des interactions de pagination pour montrer la façon dont vous pouvez gérer des scénarios réels dans lesquels les modifications de page déclenchent des appels d’API.

Modèles d'implémentation clés

Lors de l’implémentation de la pagination asynchrone dans vos applications, tenez compte des modèles essentiels suivants :

Gestion des états de chargement

• Définissez l’état de chargement sur true immédiatement lorsque les actions de pagination sont déclenchées.
• Utilisez le debouncing pour empêcher les appels d’API successifs rapides pendant les interactions avec l’utilisateur.
• Affichez les indicateurs de chargement visuels à l’aide du composant TableLoader pendant l’extraction des données.
• Désactivez les contrôles de pagination pendant le chargement pour éviter les conflits de requêtes.

Accessibilité

• Définissez aria-busy="true" au niveau de la table lorsque les états de chargement sont actifs.
• Utilisez aria-live="polite" au niveau de la table pour annoncer les modifications de pagination aux lecteurs d’écran.
• Utilisez la propriété disabled au niveau de la pagination pour empêcher l’interaction des utilisateurs pendant les opérations asynchrones tout en préservant la position du focus du clavier.

Implémentation des composants

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>
    );
}

Gestion des données

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 },
    }
];

Implémentation des composants

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>
    );
}

Gestion des données

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 },
    }
];

Journal des modifications

10.12.0

Introduction du composant @jutro/components/Pagination.