paginación en tablas

K

kapa.ai•4/24/25, 8:45 PM

Hi @Leo Silva. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•4/24/25, 8:45 PM

----------------------
La documentación y ejemplos de refine muestran cómo implementar la paginación en tablas y cómo cambiar la cantidad de elementos a visualizar (“Rows per page” o “Show X”). Sin embargo, no hay información específica en los recursos proporcionados sobre cómo traducir el texto "/page" o “Rows per page” directamente desde refine o sus componentes de tabla.

En los ejemplos, el texto para seleccionar la cantidad de elementos por página se define manualmente en el JSX, por ejemplo:

<select
  value={pageSize}
  onChange={(e) => setPageSize(Number(e.target.value))}
>
  {[10, 20, 30, 40, 50].map((size) => (
    <option key={size} value={size}>
      Show {size}
    </option>
  ))}
</select>

<select
  value={pageSize}
  onChange={(e) => setPageSize(Number(e.target.value))}
>
  {[10, 20, 30, 40, 50].map((size) => (
    <option key={size} value={size}>
      Show {size}
    </option>
  ))}
</select>

<select
  value={pageSize}
  onChange={(e) => setPageSize(Number(e.target.value))}
>
  {[10, 20, 30, 40, 50].map((size) => (
    <option key={size} value={size}>
      Show {size}
    </option>
  ))}
</select>

<select
  value={pageSize}
  onChange={(e) => setPageSize(Number(e.target.value))}
>
  {[10, 20, 30, 40, 50].map((size) => (
    <option key={size} value={size}>
      Show {size}
    </option>
  ))}
</select>

O bien:

<Button variant="bordered" className="capitalize">
  Rows per page
</Button>

<Button variant="bordered" className="capitalize">
  Rows per page
</Button>

<Button variant="bordered" className="capitalize">
  Rows per page
</Button>

<Button variant="bordered" className="capitalize">
  Rows per page
</Button>

Para traducir estos textos, simplemente reemplázalos por la traducción deseada en el JSX, por ejemplo:

<option key={size} value={size}>
  Mostrar {size}
</option>

<option key={size} value={size}>
  Mostrar {size}
</option>

<option key={size} value={size}>
  Mostrar {size}
</option>

<option key={size} value={size}>
  Mostrar {size}
</option>

o

<Button variant="bordered" className="capitalize">
  Filas por página
</Button>

<Button variant="bordered" className="capitalize">
  Filas por página
</Button>

<Button variant="bordered" className="capitalize">
  Filas por página
</Button>

<Button variant="bordered" className="capitalize">
  Filas por página
</Button>

En resumen, la traducción de los textos de paginación en las tablas de refine depende de cómo renders el componente y los textos que tú mismo defines en el JSX. No hay un sistema de traducción automática para estos textos en los ejemplos de la documentación, por lo que debes traducirlos manualmente en tu código fuente donde se muestran estos textos en la interfaz de usuarioBuilding React admin panel with NextUI and Refine, Introduction to React Table - TanStack Table Adapter for React.

K

kapa.ai•4/24/25, 8:45 PM

Si necesitas internacionalización más avanzada, deberías integrar una librería de i18n como react-i18next y usarla para estos textos. Pero esto no está cubierto en los recursos proporcionados.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•4/24/25, 8:45 PM

@1097560471739043850 Kapa.ai is still learning and improving, please let me know how I did by reacting below.