innoboxrr-react-datatable 2.0.0

package/README.md

@@ -0,0 +1,90 @@
+# innoboxrr-react-datatable
+
+Gemelo React de [`innoboxrr-vue-datatable`](../vue-datatable). Los mismos props,
+el mismo contrato de modelo.
+
+El contrato vive en `resources/<framework>/src/models/<entity>/index.js`, que
+es **el mismo archivo** para Vue y para React: funciones puras y llamadas HTTP,
+sin nada de un framework de UI. Por eso las dos tablas reciben lo mismo.
+
+## Instalación
+
+```
+npm i innoboxrr-react-datatable
+```
+
+## Uso
+
+```jsx
+import DataTable, { registerRoutes } from 'innoboxrr-react-datatable'
+import * as postModel from './models/post'
+
+registerRoutes({
+    AdminCreatePost: '/admin/posts/create',
+    AdminEditPost: '/admin/posts/:id/edit',
+    AdminShowPost: '/admin/posts/:id',
+})
+
+<DataTable
+    dataUrl={route('api.acme.blog.post.index')}
+    policyUrl={route('api.acme.blog.post.policies')}
+    model={postModel}
+    filterForm={<FilterForm onSubmit={setFilters} />} />
+```
+
+## Equivalencias con la versión Vue
+
+| Vue | React |
+|---|---|
+| `<slot name="filterForm">` | prop `filterForm` (React no tiene slots con nombre) |
+| `@sortColumn`, `@actionClicked`… | props `onSortColumn`, `onActionClicked`… |
+| `defineExpose({ crudActions, dataTable, pagination })` | el hook `useDataTable`, exportado |
+| rutas con nombre de vue-router | `registerRoutes()` (ver abajo) |
+| `uk-toggle` sobre el formulario de filtros | estado del componente |
+
+Todo lo demás —`dataUrl`, `dataMethod`, `model`, `policyUrl`, `policyMethod`,
+`showTopbar`, `hasActions`, `hasFilter`, `formFilters`, `externalFilters`,
+`extraParams`, `extraQuery`, `hideColumns`, `cardWrapper`, `showTableHeader`—
+se llama y significa lo mismo.
+
+## Rutas con nombre
+
+El contrato del modelo apunta a rutas **por nombre**:
+
+```js
+params: { to: { name: 'AdminEditPost', params: { id: 1 } } }
+```
+
+vue-router resuelve eso de fábrica; React Router 7 no tiene rutas con nombre.
+`registerRoutes({ nombre: patrón })` cierra ese hueco, y el módulo generado lo
+llama al montarse. Una ruta sin registrar **lanza**: devolver `#` escondería el
+fallo hasta que alguien hiciera clic.
+
+## `useDataTable`
+
+Toda la lógica —cargar, ordenar, paginar, resolver políticas— está en el hook,
+fuera del componente. Se puede probar sin montar nada y sirve para pintar la
+misma tabla de otra forma:
+
+```jsx
+const { dataTable, pagination, sortColumn, updatePage } = useDataTable({ ... })
+```
+
+## Diferencias deliberadas
+
+- **El clon de cada fila se hace una vez por repintado**, no en una caché de
+  módulo. La versión Vue guarda los clones en un `WeakMap` global, así que un
+  `parser` que escriba en su fila envenena esa copia para el resto de la vida
+  de la página, y dos tablas que compartan objetos de fila comparten clones.
+- **La paginación no tiene estado propio.** En Vue lo tenía y se le
+  desincronizaba cuando la página cambiaba desde fuera, por ejemplo al
+  reiniciar los filtros.
+- **`ActionListComponent` es uno solo.** En Vue el bloque de acciones está
+  copiado en `DataTable.vue` y en `DataTableComponent.vue`, y las dos copias no
+  hacen lo mismo: la de dentro soporta `action.link` y la de fuera no.
+
+## Pruebas
+
+```
+npm test
+```

package/index.js

@@ -0,0 +1,17 @@
+/**
+ * Gemelo React de innoboxrr-vue-datatable.
+ *
+ * El export por defecto es la tabla, igual que en la version Vue. Se exponen
+ * ademas el hook con la logica (por si alguien quiere pintarla de otra forma)
+ * y el registro de rutas con nombre, que es lo que React Router no trae y el
+ * contrato del modelo necesita.
+ */
+
+import DataTable from './src/DataTable.jsx'
+
+export default DataTable
+
+export { default as useDataTable } from './src/useDataTable.js'
+export { buildPath, hasRoute, registerRoutes, resetRoutes } from './src/routes.js'
+export { default as DataTableComponent } from './src/components/DataTableComponent.jsx'
+export { default as SelectPaginationComponent } from './src/components/SelectPaginationComponent.jsx'

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "innoboxrr-react-datatable",
+  "version": "2.0.0",
+  "description": "Gemelo React de innoboxrr-vue-datatable: el mismo contrato de modelo, la misma tabla.",
+  "type": "module",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./src/*": "./src/*"
+  },
+  "files": [
+    "index.js",
+    "src"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/innoboxrr/react-datatable.git"
+  },
+  "keywords": [
+    "react",
+    "react19",
+    "datatable",
+    "table",
+    "crud",
+    "innoboxrr"
+  ],
+  "author": "Homero Raul Vargas Cruz",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "axios": "^1.7.0"
+  },
+  "peerDependencies": {
+    "innoboxrr-form-core": "^2.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@vitejs/plugin-react": "^5.0.0",
+    "jsdom": "^25.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0",
+    "vite": "^7.1.0",
+    "vitest": "^3.0.0"
+  }
+}

package/src/DataTable.jsx

@@ -0,0 +1,151 @@
+import { useState } from 'react'
+import ActionListComponent from './components/ActionListComponent.jsx'
+import DataTableComponent from './components/DataTableComponent.jsx'
+import NavDropdownComponent from './components/NavDropdownComponent.jsx'
+import SelectPaginationComponent from './components/SelectPaginationComponent.jsx'
+import useDataTable from './useDataTable.js'
+
+/**
+ * Gemelo de DataTable.vue.
+ *
+ * `model` es el contrato de `resources/<framework>/src/models/<entity>/
+ * index.js`, que es **el mismo archivo** para Vue y para React: funciones
+ * puras y llamadas HTTP, sin nada de un framework de UI. Por eso este
+ * componente recibe exactamente los mismos props que su gemelo.
+ *
+ * La única diferencia real: el slot `filterForm` de Vue aquí es el prop
+ * `filterForm`, porque React no tiene slots con nombre.
+ */
+export default function DataTable({
+    dataUrl,
+    dataMethod = 'post',
+    model,
+    policyUrl,
+    policyMethod = 'post',
+    showTopbar = true,
+    hasActions = true,
+    hasFilter = true,
+    formFilters = {},
+    externalFilters = {},
+    extraParams = {},
+    extraQuery = {},
+    hideColumns = [],
+    cardWrapper = true,
+    showTableHeader = true,
+    filterForm = null,
+}) {
+    const [filtersOpen, setFiltersOpen] = useState(false)
+
+    const {
+        dataTable,
+        pagination,
+        crudActions,
+        updateFilters,
+        sortColumn,
+        updatePage,
+        actionClicked,
+        actionButtonClicked,
+    } = useDataTable({
+        dataUrl,
+        dataMethod,
+        model,
+        policyUrl,
+        policyMethod,
+        formFilters,
+        externalFilters,
+        hideColumns,
+    })
+
+    const dataTableComponents = typeof model.dataTableComponents === 'function'
+        ? model.dataTableComponents()
+        : {}
+
+    return (
+        <div>
+            {showTopbar ? (
+                <div>
+                    <div className="fe-container fe-container-wide pt-4">
+                        <div fe-grid="">
+                            {hasActions ? (
+                                <div className="fe-w-expand">
+                                    <button
+                                        type="button"
+                                        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+                                        onClick={() => actionButtonClicked(crudActions)}>
+                                        Acciones
+                                    </button>
+
+                                    <NavDropdownComponent id="actionCrudDropdown" pos="right">
+                                        <ActionListComponent
+                                            actions={crudActions}
+                                            extraParams={extraParams}
+                                            extraQuery={extraQuery}
+                                            onActionClicked={actionClicked} />
+                                    </NavDropdownComponent>
+                                </div>
+                            ) : (
+                                <div><div className="fe-w-expand"></div></div>
+                            )}
+
+                            {hasFilter ? (
+                                <div className="fe-w-auto">
+                                    <div className="fe-grid-divider fe-children-expand fe-text-center" fe-grid="">
+                                        <div>
+                                            <button
+                                                type="button"
+                                                aria-label="Update results"
+                                                className="fe-text-right pointer"
+                                                onClick={updateFilters}>
+                                                <svg className="w-6 h-6 text-slate-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
+                                                    <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97" />
+                                                </svg>
+                                            </button>
+                                        </div>
+
+                                        <div>
+                                            <button
+                                                type="button"
+                                                aria-label="Buscar"
+                                                aria-expanded={filtersOpen}
+                                                className="fe-text-right pointer"
+                                                onClick={() => setFiltersOpen((open) => ! open)}>
+                                                <svg className="w-6 h-6 text-slate-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
+                                                    <path d="M18.85 1.1A1.99 1.99 0 0 0 17.063 0H2.937a2 2 0 0 0-1.566 3.242L6.99 9.868 7 14a1 1 0 0 0 .4.8l4 3A1 1 0 0 0 13 17l.01-7.134 5.66-6.676a1.99 1.99 0 0 0 .18-2.09Z" />
+                                                </svg>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            ) : null}
+                        </div>
+                    </div>
+
+                    {hasFilter ? (
+                        // El uk-toggle de la version Vue trabaja sobre el DOM
+                        // por su cuenta; en React el estado gobierna la vista.
+                        <div className="filter-form fe-card fe-card-body fe-pt-0" hidden={! filtersOpen}>
+                            {filterForm}
+                        </div>
+                    ) : null}
+                </div>
+            ) : null}
+
+            <div className={`fe-container fe-container-wide${showTopbar ? ' ptb-20' : ''}`}>
+                <div className={`fe-p-sm${cardWrapper ? ' bg-white p-6 rounded-lg shadow dark:border-slate-700 dark:bg-slate-800' : ''}`}>
+                    <DataTableComponent
+                        actions={hasActions}
+                        dataTable={dataTable}
+                        extraParams={extraParams}
+                        extraQuery={extraQuery}
+                        showTableHeader={showTableHeader}
+                        dataTableComponents={dataTableComponents}
+                        onSortColumn={sortColumn}
+                        onActionButtonClicked={actionButtonClicked}
+                        onActionClicked={actionClicked} />
+
+                    <SelectPaginationComponent meta={pagination.meta} onPageChange={updatePage} />
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/ActionListComponent.jsx

@@ -0,0 +1,62 @@
+import DisabledLinkComponent from './DisabledLinkComponent.jsx'
+import IconLinkComponent from './IconLinkComponent.jsx'
+import IconRouteComponent from './IconRouteComponent.jsx'
+
+const closeDropdown = (event) => {
+    const dropdown = event.target.closest('.uk-dropdown')
+
+    // UIkit lo aporta la aplicación anfitriona.
+    if (dropdown) {
+        globalThis.UIkit?.dropdown(dropdown)?.hide(false)
+    }
+}
+
+/**
+ * Las tres formas que puede tomar una acción del contrato del modelo, en un
+ * solo sitio. En la versión Vue este bloque está copiado en `DataTable.vue` y
+ * en `DataTableComponent.vue`, con una diferencia entre ambas copias — la de
+ * dentro soporta `action.link` y la de fuera no.
+ */
+export default function ActionListComponent({ actions = [], extraParams = {}, extraQuery = {}, onActionClicked }) {
+    return actions.map((action) => (
+        <li key={action.id ?? action.name} className="hover:bg-slate-100 dark:hover:bg-slate-600 px-2 py-1">
+            {(() => {
+                if (! action.policy) {
+                    return <DisabledLinkComponent icon={action.icon} text={action.name} />
+                }
+
+                if (action.route && ! action.link) {
+                    return (
+                        <IconRouteComponent
+                            name={action.params.to.name}
+                            params={{ ...action.params.to.params, ...extraParams }}
+                            query={action.params.to.query ? { ...action.params.to.query, ...extraQuery } : { ...extraQuery }}
+                            icon={action.icon}
+                            text={action.name} />
+                    )
+                }
+
+                if (action.route && action.link) {
+                    return (
+                        <IconLinkComponent
+                            link={action.params.link}
+                            target={action.params.target}
+                            icon={action.icon}
+                            text={action.name} />
+                    )
+                }
+
+                return (
+                    <IconLinkComponent
+                        icon={action.icon}
+                        text={action.name}
+                        onClick={(event) => {
+                            event.preventDefault()
+                            onActionClicked?.(action)
+                            closeDropdown(event)
+                        }} />
+                )
+            })()}
+        </li>
+    ))
+}

package/src/components/DataTableComponent.jsx

@@ -0,0 +1,118 @@
+import { useMemo } from 'react'
+import ActionListComponent from './ActionListComponent.jsx'
+import NavDropdownComponent from './NavDropdownComponent.jsx'
+
+const cellValue = (head, row) => (
+    typeof head.parser === 'function' ? head.parser(row[head.id], row) : row[head.id]
+)
+
+/**
+ * Gemelo de DataTableComponent.vue: la tabla propiamente dicha.
+ */
+export default function DataTableComponent({
+    actions = false,
+    dataTable,
+    extraParams = {},
+    extraQuery = {},
+    showTableHeader = true,
+    dataTableComponents = {},
+    onSortColumn,
+    onActionButtonClicked,
+    onActionClicked,
+}) {
+    const head = useMemo(() => dataTable.head ?? [], [dataTable.head])
+
+    /**
+     * Copia aislada de cada fila, para que un parser del modelo no pueda mutar
+     * los datos de la tabla.
+     *
+     * La versión Vue clona con JSON dentro de setData(), es decir una vez por
+     * celda: con 20 filas y 8 columnas son 160 clonados en cada repintado. Un
+     * clon por fila y repintado deja lo mismo en 20 — y, a diferencia de una
+     * caché de módulo, un parser que escriba en su copia no la envenena para
+     * los repintados siguientes.
+     */
+    const body = useMemo(
+        () => (dataTable.body ?? []).map((row) => structuredClone(row)),
+        [dataTable.body]
+    )
+
+    return (
+        <div className="sm:rounded-lg overflow-x-auto">
+            <table className="min-w-full w-full text-sm text-left text-slate-500 dark:text-slate-400 p-4">
+                {showTableHeader ? (
+                    <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 rounded-sm">
+                        <tr>
+                            {head.map((column) => (
+                                <th
+                                    key={column.id}
+                                    id={`th_${column.id}`}
+                                    className={`px-6 py-3${column.sortable ? ' pointer' : ''}`}
+                                    scope="col"
+                                    onClick={() => onSortColumn?.(column)}>
+                                    {column.value}
+                                </th>
+                            ))}
+                            {actions ? <th className="fe-shrink"></th> : null}
+                        </tr>
+                    </thead>
+                ) : null}
+
+                <tbody>
+                    {(dataTable.body ?? []).map((row, index) => (
+                        <tr
+                            key={row.id}
+                            className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                            {head.map((column) => {
+                                // Las celdas leen de la copia; las acciones,
+                                // de la fila real, porque su identidad es lo
+                                // que el hook usa para sustituirlas al
+                                // resolver las politicas.
+                                const value = cellValue(column, body[index] ?? row)
+                                const Component = column.component ? dataTableComponents[column.component] : null
+
+                                return (
+                                    <td key={column.id} className="px-6 py-4">
+                                        {Component ? (
+                                            <Component
+                                                {...(typeof value === 'object' && value !== null ? value : { value })}
+                                                onCallback={(payload) => (
+                                                    typeof column.callback === 'function'
+                                                        ? column.callback(payload, row)
+                                                        : null
+                                                )} />
+                                        ) : column.html ? (
+                                            <span className="dark:text-white" dangerouslySetInnerHTML={{ __html: value }}></span>
+                                        ) : (
+                                            <span className="dark:text-white">{value}</span>
+                                        )}
+                                    </td>
+                                )
+                            })}
+
+                            {actions ? (
+                                <td className="fe-text-right">
+                                    <button
+                                        type="button"
+                                        aria-label={`Acciones del registro ${row.id}`}
+                                        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+                                        onClick={() => onActionButtonClicked?.(row.actions)}>
+                                        <i className="fas fa-cogs"></i>
+                                    </button>
+
+                                    <NavDropdownComponent id={`dropdown_${row.id}`} pos="left">
+                                        <ActionListComponent
+                                            actions={row.actions ?? []}
+                                            extraParams={extraParams}
+                                            extraQuery={extraQuery}
+                                            onActionClicked={onActionClicked} />
+                                    </NavDropdownComponent>
+                                </td>
+                            ) : null}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    )
+}

package/src/components/DisabledLinkComponent.jsx

@@ -0,0 +1,20 @@
+/**
+ * Gemelo de DisabledLinkComponent.vue: la acción que el usuario no puede
+ * ejecutar. Se sigue mostrando, deshabilitada, para que la interfaz no cambie
+ * de forma según los permisos.
+ */
+export default function DisabledLinkComponent({ icon = '', text }) {
+    const showIcon = icon !== '' && icon != null
+
+    return (
+        <a
+            href="#"
+            aria-disabled="true"
+            className="disabled-link block px-4 py-2 dark:hover:text-white dark:text-slate-400"
+            uk-tooltip="title: This action is not authorized; pos:right"
+            onClick={(event) => event.preventDefault()}>
+            {showIcon ? <span className="fe-mr-sm uk-icon" uk-icon={icon}></span> : null}
+            <span>{text}</span>
+        </a>
+    )
+}

package/src/components/IconLinkComponent.jsx

@@ -0,0 +1,26 @@
+/**
+ * Gemelo de IconLinkComponent.vue.
+ */
+export default function IconLinkComponent({
+    link = '#',
+    text,
+    icon,
+    ratio = 1,
+    textClass = '',
+    target = '_self',
+    onClick,
+}) {
+    return (
+        <a
+            className="block px-4 py-2 dark:hover:text-white dark:text-slate-400"
+            href={link}
+            target={target}
+            onClick={onClick}>
+            <span
+                className="fe-mr-sm uk-icon"
+                uk-icon={`icon: ${icon}; ratio: ${ratio};`}
+                style={{ fontSize: `${ratio * 16}px` }}></span>
+            <span className={textClass}>{text}</span>
+        </a>
+    )
+}

package/src/components/IconRouteComponent.jsx

@@ -0,0 +1,33 @@
+import { Link } from 'react-router-dom'
+import { buildPath } from '../routes.js'
+
+/**
+ * Gemelo de IconRouteComponent.vue.
+ *
+ * vue-router resuelve `{ name, params, query }`; React Router 7 no tiene rutas
+ * con nombre, así que la ruta se construye con el mapa que declare la
+ * aplicación (ver `registerRoutes` en `src/routes.js`). El contrato del modelo
+ * —`params.to.name`— no cambia, que es lo que importa: `models/<entity>/
+ * index.js` es el mismo archivo para Vue y para React.
+ */
+export default function IconRouteComponent({
+    name,
+    params = {},
+    query = {},
+    text,
+    icon,
+    ratio = 1,
+    textClass = '',
+}) {
+    return (
+        <Link
+            to={buildPath(name, params, query)}
+            className="block px-4 py-2 dark:hover:text-white dark:text-slate-400">
+            <span
+                className="fe-mr-sm uk-icon"
+                uk-icon={`icon: ${icon}; ratio: ${ratio};`}
+                style={{ fontSize: `${ratio * 16}px` }}></span>
+            <span className={textClass}>{text}</span>
+        </Link>
+    )
+}

package/src/components/NavDropdownComponent.jsx

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from 'react'
+
+/**
+ * Gemelo de NavDropdownComponent.vue.
+ *
+ * UIkit lee el atributo `uk-dropdown` del DOM. React lo escribe igual, pero
+ * UIkit sólo lo procesa al montarse el nodo, así que se le avisa — con guarda,
+ * porque UIkit lo aporta la aplicación anfitriona y en una prueba no está.
+ */
+export default function NavDropdownComponent({
+    id,
+    pos = 'bottom-left',
+    mode = 'click',
+    offset = 0,
+    // Es el nombre de una animacion de UIkit, no una clase nuestra.
+    animation = 'uk-animation-slide-top-small',
+    duration = 500,
+    children,
+}) {
+    const host = useRef(null)
+
+    useEffect(() => {
+        globalThis.UIkit?.update?.(host.current)
+    }, [])
+
+    return (
+        <div
+            ref={host}
+            id={id}
+            uk-dropdown={`pos: ${pos}; mode: ${mode}; offset: ${offset}; animation: ${animation}; duration: ${duration};`}
+            className="fe-p-0 z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-slate-800 p-2">
+            <ul className="fe-menu">{children}</ul>
+        </div>
+    )
+}

package/src/components/SelectPaginationComponent.jsx

@@ -0,0 +1,69 @@
+/**
+ * Gemelo de SelectPaginationComponent.vue.
+ *
+ * La página vive en el padre (el hook), así que aquí no hay estado local: la
+ * versión Vue lo tenía y se le desincronizaba cuando la página cambiaba desde
+ * fuera, por ejemplo al reiniciar los filtros.
+ */
+export default function SelectPaginationComponent({ meta = {}, onPageChange }) {
+    const current = meta.current_page ?? 1
+    const last = meta.last_page ?? 1
+
+    return (
+        <div className="pagination" fe-grid="">
+            <div className="fe-w-auto">
+                <ul className="fe-pagination fe-justify-start fe-mt-md" fe-mb="">
+                    <li>
+                        {meta.total > 0
+                            ? <span>Showing {meta.from} to {meta.to} of {meta.total} entries</span>
+                            : <span>No results found</span>}
+                    </li>
+                </ul>
+            </div>
+
+            <div className="fe-w-expand">
+                <ul className="fe-pagination fe-justify-end fe-mt-md" fe-mb="">
+                    {current > 1 ? (
+                        <li>
+                            <a
+                                href="#"
+                                aria-label="Anterior"
+                                onClick={(event) => {
+                                    event.preventDefault()
+                                    onPageChange?.(current - 1)
+                                }}>
+                                <span fe-page-prev=""></span>
+                            </a>
+                        </li>
+                    ) : null}
+
+                    <li>
+                        <select
+                            aria-label="Página"
+                            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                            value={current}
+                            onChange={(event) => onPageChange?.(Number(event.target.value))}>
+                            {Array.from({ length: last }, (_, index) => index + 1).map((page) => (
+                                <option key={`page_${page}`} value={page}>{page}</option>
+                            ))}
+                        </select>
+                    </li>
+
+                    {current < last ? (
+                        <li>
+                            <a
+                                href="#"
+                                aria-label="Siguiente"
+                                onClick={(event) => {
+                                    event.preventDefault()
+                                    onPageChange?.(current + 1)
+                                }}>
+                                <span fe-page-next=""></span>
+                            </a>
+                        </li>
+                    ) : null}
+                </ul>
+            </div>
+        </div>
+    )
+}

package/src/routes.js

@@ -0,0 +1,86 @@
+/**
+ * Rutas con nombre para React Router.
+ *
+ * El contrato del modelo (`models/<entity>/index.js`) es el mismo archivo para
+ * Vue y para React, y en él las acciones apuntan a una ruta **por nombre**:
+ *
+ *     params: { to: { name: 'AdminEditPost', params: { id: 1 } } }
+ *
+ * vue-router resuelve eso de fábrica. React Router 7 no, así que el módulo
+ * generado registra aquí su mapa nombre → patrón y este archivo hace la
+ * sustitución. Sin esto, cada gemelo React tendría que reescribir las acciones
+ * — y ahí es donde el contrato dejaría de ser uno.
+ */
+
+/** @type {Map<string, string>} */
+const routes = new Map()
+
+/**
+ * @param {Record<string, string>} definitions  nombre → patrón, p. ej.
+ *   `{ AdminEditPost: '/admin/posts/:id/edit' }`
+ */
+export function registerRoutes(definitions) {
+    Object.entries(definitions).forEach(([name, pattern]) => routes.set(name, pattern))
+}
+
+export function hasRoute(name) {
+    return routes.has(name)
+}
+
+export function resetRoutes() {
+    routes.clear()
+}
+
+/**
+ * @param {string} name
+ * @param {Record<string, string|number>} params
+ * @param {Record<string, string|number>} query
+ * @returns {string}
+ */
+export function buildPath(name, params = {}, query = {}) {
+    const pattern = routes.get(name)
+
+    if (! pattern) {
+        // Devolver '#' escondería el fallo hasta que alguien hiciera clic. La
+        // ruta que falta es un error de registro, y se ve antes si grita.
+        throw new Error(
+            `[innoboxrr-react-datatable] La ruta '${name}' no está registrada. `
+            + 'Llama a registerRoutes({ ' + name + ': \'/tu/patron/:id\' }) al montar el módulo.'
+        )
+    }
+
+    const used = new Set()
+
+    const path = pattern.replace(/:([A-Za-z0-9_]+)\??/g, (match, key) => {
+        if (params[key] === undefined || params[key] === null) {
+            if (match.endsWith('?')) {
+                return ''
+            }
+
+            throw new Error(`[innoboxrr-react-datatable] Falta el parámetro '${key}' para la ruta '${name}'.`)
+        }
+
+        used.add(key)
+
+        return encodeURIComponent(String(params[key]))
+    }).replace(/\/{2,}/g, '/').replace(/\/$/, '') || '/'
+
+    // Lo que no encaje en el patrón viaja como query, igual que en vue-router.
+    const search = new URLSearchParams()
+
+    Object.entries(params).forEach(([key, value]) => {
+        if (! used.has(key) && value !== undefined && value !== null) {
+            search.set(key, String(value))
+        }
+    })
+
+    Object.entries(query).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+            search.set(key, String(value))
+        }
+    })
+
+    const queryString = search.toString()
+
+    return queryString ? `${path}?${queryString}` : path
+}

package/src/useDataTable.js

@@ -0,0 +1,256 @@
+import axios from 'axios'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+/**
+ * Se leía de la global `csrf_token`, que la aplicación anfitriona tenía que
+ * definir en window: el componente no se podía montar fuera de ella.
+ */
+export const csrfToken = () => globalThis.csrf_token
+    ?? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+    ?? ''
+
+/**
+ * Sustituye a `_.isEqual` de lodash, que la versión Vue usaba como global sin
+ * declararla como dependencia.
+ */
+export const isEqual = (a, b) => {
+    if (a === b) {
+        return true
+    }
+
+    if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {
+        return false
+    }
+
+    const keysA = Object.keys(a)
+    const keysB = Object.keys(b)
+
+    return keysA.length === keysB.length && keysA.every((key) => isEqual(a[key], b[key]))
+}
+
+const hiddenColumnIds = (hideColumns) => hideColumns.map(
+    // Se admite tanto ['name'] como [{ id: 'name' }]: el contrato nunca estuvo
+    // documentado y por ahí circulan las dos formas.
+    (column) => (typeof column === 'string' ? column : column?.id)
+)
+
+/**
+ * Toda la lógica de la tabla: cargar, ordenar, paginar y resolver políticas.
+ *
+ * Está fuera del componente a propósito. Es exactamente lo mismo que hace la
+ * versión Vue, y así se puede probar sin montar nada — y reutilizar si alguien
+ * quiere pintar la tabla de otra forma.
+ */
+export default function useDataTable({
+    dataUrl,
+    dataMethod = 'post',
+    model,
+    policyUrl,
+    policyMethod = 'post',
+    formFilters = {},
+    externalFilters = {},
+    hideColumns = [],
+}) {
+    const head = useMemo(() => {
+        const hidden = hiddenColumnIds(hideColumns)
+
+        return model.dataTableHead().filter((column) => ! hidden.includes(column.id))
+    }, [model, hideColumns])
+
+    const [body, setBody] = useState([])
+    const [pagination, setPagination] = useState({ meta: {}, links: [] })
+    const [crudActions, setCrudActions] = useState(() => model.crudActions())
+    const [sort, setSort] = useState(() => model.dataTableSort())
+    const [orderBy, setOrderBy] = useState('id')
+    const [page, setPage] = useState(1)
+
+    const internalSort = useRef(false)
+    const dataAttempts = useRef(0)
+    const policyAttempts = useRef(0)
+    const timers = useRef([])
+
+    // Los props cambian de identidad en cada render del padre; las refs
+    // evitan que eso reprograme la carga en bucle.
+    const latest = useRef({})
+    latest.current = { dataUrl, dataMethod, model, formFilters, externalFilters, orderBy, sort, page }
+
+    const getFilters = useCallback(() => {
+        const { formFilters: form, externalFilters: external, orderBy: by, sort: order, page: current } = latest.current
+
+        const params = { _token: csrfToken(), managed: true, except_view_any: true }
+        const ordering = { orderBy: by, orderMode: order[by] }
+
+        // Con orden interno, el del usuario gana a lo que traigan los filtros
+        // externos; sin él, es al revés.
+        return internalSort.current
+            ? { ...params, ...form, ...external, ...ordering, page: current }
+            : { ...params, ...form, ...ordering, ...external, page: current }
+    }, [])
+
+    const fetchData = useCallback(async () => {
+        const filters = getFilters()
+        const { dataUrl: url, dataMethod: method } = latest.current
+
+        try {
+            const response = await axios({
+                method,
+                url,
+                data: method === 'post' ? filters : null,
+                params: method === 'get' ? filters : null,
+            })
+
+            dataAttempts.current = 0
+            setBody(response.data.data)
+            setPagination({ meta: response.data.meta, links: response.data.links })
+        } catch (error) {
+            // Un fallo de red no trae respuesta: leer error.response.status sin
+            // comprobarlo lanzaba un TypeError dentro del propio manejador.
+            if (error.response?.status === 403) {
+                return
+            }
+
+            if (dataAttempts.current <= 3) {
+                timers.current.push(window.setTimeout(() => {
+                    dataAttempts.current += 1
+                    fetchData()
+                }, 1500))
+            }
+        }
+    }, [getFilters])
+
+    const updateFilters = useCallback(() => {
+        latest.current.model.setFilters(getFilters())
+
+        return fetchData()
+    }, [fetchData, getFilters])
+
+    const sortColumn = useCallback((column) => {
+        if (column.sortable !== true) {
+            return
+        }
+
+        // A partir de aquí el orden elegido por el usuario manda sobre el que
+        // puedan traer los filtros externos.
+        internalSort.current = true
+
+        setOrderBy(column.id)
+        setSort((current) => {
+            const next = { ...current, [column.id]: current[column.id] === 'asc' ? 'desc' : 'asc' }
+
+            latest.current.sort = next
+            latest.current.orderBy = column.id
+
+            return next
+        })
+    }, [])
+
+    const updatePage = useCallback((next) => {
+        latest.current.page = next
+        setPage(next)
+    }, [])
+
+    const actionClicked = useCallback(async (action) => {
+        try {
+            await latest.current.model[action.callback](action.params)
+
+            return updateFilters()
+        } catch (error) {
+            console.error(error)
+        }
+    }, [updateFilters])
+
+    /**
+     * Pregunta al backend qué acciones puede ejecutar el usuario sobre esa
+     * fila y marca `policy` en cada una.
+     */
+    const actionButtonClicked = useCallback(async (actions) => {
+        const requestData = { _token: csrfToken(), id: actions[0]?.params?.id ?? null }
+
+        try {
+            const response = await axios({
+                method: policyMethod,
+                url: policyUrl,
+                data: policyMethod === 'post' ? requestData : null,
+                params: policyMethod === 'get' ? requestData : null,
+            })
+
+            policyAttempts.current = 0
+
+            const allowed = actions.map((action) => (
+                response.data[action.id] ? { ...action, policy: true } : action
+            ))
+
+            // La versión Vue mutaba las acciones en sitio; en React eso no
+            // repinta nada, así que se sustituye la lista.
+            if (actions === crudActions) {
+                setCrudActions(allowed)
+            } else {
+                setBody((rows) => rows.map((row) => (
+                    row.actions === actions ? { ...row, actions: allowed } : row
+                )))
+            }
+
+            return allowed
+        } catch {
+            if (policyAttempts.current <= 3) {
+                timers.current.push(window.setTimeout(() => {
+                    policyAttempts.current += 1
+                    actionButtonClicked(actions)
+                }, 1500))
+
+                return
+            }
+
+            timers.current.push(window.setTimeout(() => {
+                policyAttempts.current = 0
+            }, 3000))
+        }
+    }, [policyMethod, policyUrl, crudActions])
+
+    // Carga inicial y recarga cuando cambian orden o página.
+    useEffect(() => {
+        updateFilters()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [orderBy, sort, page])
+
+    // Un filtro nuevo vuelve a la primera página; uno externo no.
+    const previousForm = useRef(formFilters)
+    const previousExternal = useRef(externalFilters)
+
+    useEffect(() => {
+        if (isEqual(previousForm.current, formFilters)) {
+            return
+        }
+
+        previousForm.current = formFilters
+        updatePage(1)
+        updateFilters()
+    }, [formFilters, updateFilters, updatePage])
+
+    useEffect(() => {
+        if (isEqual(previousExternal.current, externalFilters)) {
+            return
+        }
+
+        previousExternal.current = externalFilters
+        updateFilters()
+    }, [externalFilters, updateFilters])
+
+    useEffect(() => () => {
+        timers.current.forEach((timer) => window.clearTimeout(timer))
+    }, [])
+
+    return {
+        dataTable: { head, body },
+        pagination,
+        crudActions,
+        sort,
+        orderBy,
+        page,
+        updateFilters,
+        sortColumn,
+        updatePage,
+        actionClicked,
+        actionButtonClicked,
+    }
+}