Tabellenpaginierung

Tabellenpaginierung in Storybook

Verwendung

Überblick

Die Paginierung ermöglicht Benutzern die Navigation durch große Datensätze, da der Inhalt in überschaubare Seiten aufgeteilt wird. Sie bietet Steuerelemente zum Durchsuchen der Seiten und zum Anpassen der Anzahl der gleichzeitig angezeigten Elemente, was für die Leistungsfähigkeit und Lesbarkeit in datenintensiven Anwendungen unerlässlich ist.

Zu verwenden

• Zur Verwaltung großer Datensätze: Verwenden Sie diese Option, wenn eine Tabelle Hunderte oder Tausende von Zeilen enthält und das gleichzeitige Rendern aller Zeilen Auswirkungen auf die Leistung oder die Seitenladezeiten hat.
• Für mehr Überschaubarkeit: Verwenden Sie diese Option, wenn zu viele Daten auf einer Seite die Benutzer überfordern und das Auffinden oder Vergleichen von Werten erschweren.
• Zur Verbesserung der Barrierefreiheit: Verwenden Sie diese Option, wenn große Tabellen zu Navigationsproblemen für Screenreader oder Tastaturbenutzer führen (z. B. ist eine Tabelle mit Hunderten von Zeilen unübersichtlich).
• Für gefilterte Ansichten: Zu verwenden, wenn Benutzer in der Regel eine Teilmenge der Daten anzeigen, z. B. Suchergebnisse oder gefilterte Ansichten. Die Paginierung bietet Benutzern Orientierung durch überschaubare Abschnitte.

Nicht zu verwenden

• Bei kleinen Datensätzen: Zu vermeiden, wenn sämtliche Zeilen ohne Leistungsprobleme oder Überforderung des Benutzers angezeigt werden können (z. B. 20-50 Zeilen).
• Für breit angelegte Vergleichsaufgaben: Zu vermeiden, wenn Benutzer viele Zeilen gleichzeitig vergleichen müssen. Ziehen Sie stattdessen virtuelles Scrollen oder gefilterte Ansichten in Betracht.
• Für Aufgaben mit einer Ansicht: Nicht verwenden, wenn der Datensatz in seiner Gesamtheit dargestellt werden muss und nicht auf mehrere Seiten aufgeteilt werden kann, wie z. B. eine Einstellungstabelle.

Formatierung

Aufbau

Die Paginierungskomponente wird im von ihr gesteuerten Inhalt unten angezeigt und besteht aus den folgenden Elementen:

1. Zeilenauswahl pro Seite: Ein Dropdown-Menü, in dem Benutzer die Anzahl der auf jeder Seite angezeigten Elemente ändern können.
2. Anzeige des Elementbereichs: Textbeschriftung, die angibt, welche Elemente von der Gesamtzahl der Elemente gerade angezeigt werden (z. B. „1–10 von 25“).
3. Navigations-Steuerelemente: Symbolschaltflächen, mit denen Benutzer zur vorherigen oder nächsten Datenseite sowie zur ersten und letzten Seite navigieren können.

Inhalt

Allgemeine Richtlinien fürs Schreiben

• Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
• Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
• Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
• Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
• Halten Sie Wörter und Sätze kurz.

Verhalten

Zustände

Die primären Zustände der Paginierungskomponente stehen in Beziehung zu ihren Navigations-Steuerelementen.

• Die Schaltfläche Vorherige Seite muss deaktiviert sein, wenn sich der Benutzer auf der ersten Seite mit Daten befindet.
• Die Schaltfläche Nächste Seite muss deaktiviert sein, wenn sich der Benutzer auf der letzten Seite mit Daten befindet.

Interaktionen

• Durch Auswahl eines neuen Werts aus der Dropdownliste Zeilen pro Seite wird die damit verbundene Komponente neu geladen und die ausgewählte Anzahl von Elementen angezeigt.
• Durch Klicken auf die Schaltflächen Nächste Seite oder Vorherige Seite navigiert der Benutzer seitenweise durch den Datensatz.

Ansätze zur Verwendung der Paginierung

• Standardverwendung: Sie verwenden die Komponente standardmäßig im synchronen Kontext. Kunden stellen die Werte der Komponente direkt zur Verfügung.
• Verwendung asynchroner Tabellen: Bei Verwendung mit Tabellen, die Daten asynchron von einem Server abrufen, gibt die Paginierung den aktuellen Status der Tabelle wieder. Die Komponente selbst bleibt synchron. Die Tabelle steuert die asynchrone Logik. Dieser Ansatz gilt sowohl für die Standardverwendung als auch für die Verwendung von TanStack Table.
• Verwendung von TanStack-Tabellen: Wenn Sie eine Tabelle verwenden, die von TanStack Table verwaltet wird, übergibt der Consumer den Paginierungsstatus der Tabelle an die Paginierungskomponente. Dadurch kann die Benutzeroberfläche für die Seitennummerierung den aktuellen Tabellenstatus widerspiegeln, einschließlich aller von der Tabelle verwalteten asynchronen oder servergesteuerten Aktualisierungen.

Barrierefreiheit

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

• Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
• Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
• Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
• Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.

Beachten Sie bei Verwendung dieser Komponente in Ihrer Anwendung die folgenden Best Practices:

• Tastatur-Interaktion: Alle Steuerelemente innerhalb der Paginierungskomponente müssen mit der Tastatur fokussierbar und bedienbar sein. Benutzer müssen in der Lage sein, mit der Tab-Taste zwischen der Dropdown-Liste und den Navigationsschaltflächen zu navigieren und sie mit der Enter- oder Space-Taste zu aktivieren.
• Screenreader: Die Paginierungskomponente muss in ein <nav>-Element mit einem aria-label „Paginierung“ umschlossen werden, um sie als Landmark-Region zu erkennen. Alle Steuerelemente müssen eindeutige, barrierefreie Namen haben. Verwenden Sie für die Navigationsschaltflächen aria-label-Attribute wie „Zur vorherigen Seite wechseln“ und „Zur nächsten Seite wechseln“. Die Anzeige des Elementbereichs (z. B. „1–10 von 25“) muss programmgesteuert mit den Steuerelementen verknüpft sein, damit sie Benutzern von Screenreadern angesagt werden kann, da sie den wesentlichen Kontext für die Navigation bereitstellt.

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

Im Abschnitt Beispiele finden Sie vollständige Codebeispiele zur Demonstration verschiedener Implementierungen der Paginierung.

Importanweisung

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

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

currentPageIndexerforderlich

Typ

number

Beschreibung

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

Standardwert

0

onPageIndexChangeerforderlich

Typ

(newPageIndex: number) => void

Beschreibung

Callback function that is invoked when the page index changes.

onPageSizeChangeerforderlich

Typ

(newPageSize: number) => void

Beschreibung

Callback function that is invoked when the page size changes.

totalRowserforderlich

Typ

number

Beschreibung

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

disabled

Typ

boolean

Beschreibung

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

Standardwert

false

pageSize

Typ

number

Beschreibung

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

Standardwert

10

pageSizeOptions

Typ

number[]

Beschreibung

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

Standardwert

[10, 25, 50]

Hooks

Für Pagination sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für Pagination.

Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Beispiele

Die Tabellenkomponente bietet vollständige Paginierungsfunktionen, wobei nur Jutro-Komponenten verwendet werden. Für erweiterte Anwendungsfälle oder bestehende Integrationen können Sie optional externe Bibliotheken wie TanStack Table nutzen, um bestimmte Teile der Datenmanagement-Logik zu realisieren.

Sie können sich zwei Arten von Codebeispielen für die Tabellenpaginierung ansehen. Sie veranschaulichen die Verwendung ausschließlich von Jutro-Komponenten und die Verwendung von TanStack Table für einen Teil der Datenmanagement-Logik. Die Beispiele enthalten alle Dateien, die Sie für die Ausführung in Ihrer Umgebung brauchen, z. B. Hooks und Mock-Daten. Für jedes Beispiel wird ein anderer Satz von Dateien verwendet.

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design einer Tabelle und zu den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Grundlegende Implementierung der Paginierung

Um die Paginierung mit der Komponente Tabelle zu implementieren, kombinieren Sie die Komponenten Table und Pagination mit einem Data Management Layer, z. B. einem benutzerdefinierten Hook, der den Paginierungsstatus verwaltet.

Für die Paginierungs-Komponente sind die Eigenschaften currentPageIndex und totalRows erforderlich, um den richtigen Status anzuzeigen, sowie die Callbacks onPageIndexChange und onPageSizeChange zur Verarbeitung von Benutzerinteraktionen. Sie können Seitenänderungen vornehmen, indem Sie den Datenstatus aktualisieren und bei Änderungen der Seitengröße auf die erste Seite zurücksetzen, um sicherzustellen, dass Benutzer nicht auf leeren Seiten landen.

Verwenden Sie einen Data Management Layer (z. B. den benutzerdefinierten Hook useTableData ), um den Datensatz basierend auf der aktuellen Seite und Seitengröße aufzuteilen und dann die paginierten Daten an Ihre Tabellenzeilen zu übergeben.

Alternativ können Sie TanStack Table als Data Management Layer verwenden, die den Paginierungsstatus integriert verwaltet und Seitenberechnungen automatisch über ihren useReactTable-Hook durchführt.

Barrierefreiheit

Die Paginierungskomponente muss unterhalb der Tabelle mit einem entsprechenden aria-label auf den Tabellentitel platziert werden, um die Barrierefreiheit zu gewährleisten. Übergeben Sie die übersetzte Zeichenfolge aus der Tabellentitel-Komponente mit einem Paginierungs-Suffix an die aria-label-Eigenschaft der Pagination-Komponente.

Implementierung von Komponenten

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

Datenmanagement

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

Implementierung von Komponenten

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

Datenmanagement

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

Implementierung der asynchronen Paginierung

Dieses Beispiel veranschaulicht die Seitennummerierung mit simulierten asynchronen Vorgängen, z. B. wenn Daten von einem Server abgerufen werden müssen. Im Gegensatz zum Beispiel für die grundlegende Paginierung, bei dem Daten synchron verarbeitet werden, fügt diese Implementierung einen Ladezustand hinzu und simuliert Verzögerungen für Paginierungsinteraktionen. Hier sehen Sie, wie Sie mit realen Szenarien umgehen können, in denen Seitenänderungen API-Aufrufe auslösen.

Wichtige Implementierungsmuster

Berücksichtigen Sie bei der Implementierung der asynchronen Paginierung in Ihren Anwendungen diese wichtige Muster:

Verwaltung des Ladezustands

• Schalten Sie den Ladezustand sofort auf true, wenn Paginierungsaktionen ausgelöst werden.
• Verwenden Sie Debouncing, um schnelle aufeinanderfolgende API-Aufrufe während Benutzerinteraktionen zu verhindern.
• Zeigen Sie mithilfe der TableLoader-Komponente visuelle Ladeanzeigen an, während die Daten abgerufen werden.
• Deaktivieren Sie die Steuerelemente für Paginierung während des Ladevorgangs, um Konflikte zwischen Anforderungen zu vermeiden.

Barrierefreiheit

• Wird während des Ladezustands auf der Tabelle auf aria-busy="true" festgelegt.
• Verwenden Sie aria-live="polite" für die Tabelle, um dem Screenreader Änderungen der Paginierung anzukündigen.
• Verwenden Sie die disabled-Eigenschaft für die Paginierung, um eine Benutzerinteraktion bei asynchronen Vorgängen zu verhindern und gleichzeitig die Fokusposition der Tastatur beizubehalten.

Implementierung von Komponenten

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

Datenmanagement

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

Implementierung von Komponenten

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

Datenmanagement

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

Änderungsprotokoll

10.12.0

Eingeführte @jutro/components/Pagination-Komponente.