loon-bulma-react 2026.0.32 → 2026.0.33

package/dist/components/DataTable/DataTable.d.ts

@@ -11,7 +11,7 @@ type DataTableColumnProp<T extends unknown = unknown> = {
     /** sorteer-functie voor deze kolom. Als niet gedefinieerd kan je niet op deze kolom sorteren */
     sort?: (a: T, b: T) => -1 | 0 | 1 | number;
     /** de waarde van de kolom. Een fucnction of een property van object van type `T` (string) */
-    value: keyof T | ((item: T, hovered?: boolean, prev?: T, next?: T) => React.ReactNode);
+    value: keyof T | ((item: T, hovered?: boolean) => React.ReactNode);
     /** manier om deze cel te identificeren */
     cellIdentifier?: keyof T | ((item: T) => string);
     /** header voor de kolom. Als niet gedefinieerd wordt de `value` gebruikt, Dus als `value` een `function` is, **moet** je deze setten */
@@ -41,6 +41,21 @@ type DatatablePaginationOptionsProp = {
         value: number;
     }) => void;
 };
+/** Data Table API - voor programatische toegang tot de DataTable */
+type DataTableApi<T extends unknown = unknown> = {
+    /** Geef de index terug binnen de complete gesorteerde lijst (incl. zoekfilter, excl. paginatie-slice). */
+    getIndexForRowID: (rowIdentifier: string | number) => number;
+    /** Geef een item terug op basis van index binnen de complete gesorteerde lijst (incl. zoekfilter). */
+    getItemForIndex: (index: number) => T | undefined;
+    /** Geef de complete gesorteerde lijst terug (incl. zoekfilter, excl. paginatie-slice). */
+    getSortedData: () => T[];
+    /** Navigeer de paginatie naar de pagina die het item bevat. */
+    navigateToItem: (item: T) => void;
+    /** Navigeer de paginatie naar de pagina die het item bevat op basis van de gesorteerde index. */
+    navigateToIndex: (sortedIndex: number) => void;
+    /** Navigeer de paginatie naar de pagina die het item bevat op basis van de rowIdentifier. */
+    navigateToRowId: (rowId: string | number) => void;
+};
 type DataTableProps<T extends unknown = unknown> = {
     /** De kolommen voor de DataTable
      * @param sort een functie die twee items vergelijkt en -1, 0, 1 of een `number` teruggeeft. Als er geen sort-function is, kan de tabel **niet** op deze kolom gesorteerd worden.
@@ -132,6 +147,8 @@ type DataTableProps<T extends unknown = unknown> = {
     paginationOptions?: DatatablePaginationOptionsProp | undefined;
     /** Vul lege rijen op tot het aantal rijen per pagina op de laatste pagina (default = false). Alleen als er paginatie is */
     fillEmptyRows?: boolean;
+    /** Expose helper-functies naar de parent om op elk moment de huidige sorted-data volgorde te lezen. */
+    apiRef?: React.MutableRefObject<DataTableApi<T> | null>;
 };
 /**
  * Maak een tabel voor grote hoeveelheden data. De tabel is doorzoekbaar en heeft paginatie. Dat is allemaal uit te zetten.
@@ -183,7 +200,7 @@ type DataTableProps<T extends unknown = unknown> = {
  * @param searchPlaceholder placeholder voor zoek-input (default = 'Zoek ...')
  * @returns
  */
-declare function DataTable<T extends unknown = unknown>({ data, columns: cols, defaultSortColNum, compact, noStripes, narrow, bordered, hoverable, sticky, hideSearch, headerContent, footerContent, size, searchPlaceholder, rowIdentifier, rowClass, id: tableID, itemRef, paginationOptions: paginationOptionsProp, fillEmptyRows, onSearch, onRowSelected, onRowRightClick, renderWhenNoData, searchInfoMessage, onSortColumnChanged, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function DataTable<T extends unknown = unknown>({ data, columns: cols, defaultSortColNum, compact, noStripes, narrow, bordered, hoverable, sticky, hideSearch, headerContent, footerContent, size, searchPlaceholder, rowIdentifier, rowClass, id: tableID, itemRef, paginationOptions: paginationOptionsProp, fillEmptyRows, apiRef, onSearch, onRowSelected, onRowRightClick, renderWhenNoData, searchInfoMessage, onSortColumnChanged, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTable {
     var Dropdown: {
         ({ onHover, id, children: childrenProp, trigger: triggerProp, disabled, alignment, dropUp, startOpen, className: classNameProp, keepOpenAfterClick, }: import("./DataTableDropdown").DataTableDropdownProps): import("react/jsx-runtime").JSX.Element;
@@ -195,7 +212,7 @@ declare namespace DataTable {
             children: React.ReactNode;
             disabled?: boolean;
             onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-            onItemClick? /** is de tabel is de tabel hoverbaar (en is dat ook zichtbaar?) hebben? (default = `false`) */: (isClickable: boolean) => void;
+            onItemClick?: (isClickable: boolean) => void;
         } & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         Link({ children, onItemClick, disabled, ...props }: {
             children: React.ReactNode;
@@ -207,4 +224,4 @@ declare namespace DataTable {
 }
 declare function DataTableContainer({ className: classNameProp, ...props }: {} & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export { DataTable };
-export type { DataTableProps, DataTableColumnProp as DataTableColumn };
+export type { DataTableProps, DataTableColumnProp as DataTableColumn, DataTableApi };

package/dist/index.d.ts

@@ -21,7 +21,7 @@ export { ScrollArea } from './components/ScrollArea/ScrollArea';
 export { CodeBlock } from './components/CodeBlock/CodeBlock';
 export type { CodeBlockProps, CodeLanguage } from './components/CodeBlock/CodeBlock';
 export { DataTable } from './components/DataTable/DataTable';
-export type { DataTableColumn, DataTableProps } from './components/DataTable/DataTable';
+export type { DataTableApi, DataTableColumn, DataTableProps } from './components/DataTable/DataTable';
 export { DragDropList } from './components/DragDrop/DragDropList';
 export { Dropdown } from './components/Dropdown/Dropdown';
 export { HelpTxt } from './components/Help/Help';