Skip to content

Conversation

@guizafj
Copy link
Collaborator

@guizafj guizafj commented Sep 30, 2025

Componente Table completo con todas las funcionalidades

  • 14 stories documentadas siguiendo estándares del proyecto
  • Funcionalidades incluidas: selección, ordenamiento, paginación, celdas personalizadas
  • Enfoque API-driven con callbacks para integración backend
  • Datos españoles realistas para ejemplos
  • Código limpio sin errores TypeScript

Pendiente de cualquier corrección o mejora

- Row selection (single/multiple) with visual feedback
- Column sorting with accessibility support
- Row virtualization for large datasets
- Built-in pagination and filtering
- Full accessibility and keyboard navigation
- Custom cell renderers and theming
- 22+ Storybook stories with documentation
- Design system integration with MIT license compatibility
- Production-ready with comprehensive JSDoc documentation
- Componente Table completo con funcionalidades actuales
- Selección compleja (selectedKeys, selectionMode, selectionBehavior)
- Virtualización y sorting/pagination internos (a refactorizar)
- Contenido decorativo (topContent/bottomContent) a eliminar
- Base para implementar API-driven approach

Estado previo a refactorización para mantener historial completo.
Siguiendo planificación detallada de reducción de complejidad.
- Implemented Table component with comprehensive functionality
- Added 14 stories showcasing all features and use cases
- Included row selection, sorting, pagination, and custom cell rendering
- API-driven approach with callbacks for backend integration
- Spanish localized examples with realistic data
@netlify
Copy link

netlify bot commented Sep 30, 2025

Deploy Preview for egdev6-design-system ready!

Name Link
🔨 Latest commit 73522c2
🔍 Latest deploy log https://app.netlify.com/projects/egdev6-design-system/deploys/69232d35cc05a00008dcc386
😎 Deploy Preview https://deploy-preview-102--egdev6-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@@ -0,0 +1,106 @@
import { cva } from 'class-variance-authority';
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

este archivo debería ir dentro de types.ts

import type { CompleteTableProps, TableColumn } from './types';
import { useKeyboardNavigation, useTable, useTableEvents } from './useTable';

function Table<T = any>(props: CompleteTableProps<T>) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

las props se reciben en useTable, así como todas las funciones y variables que uses en el componente visual. Mantén en este archivo únicamente la renderización (return) y esas variables usadas como hook. Puede ver ejemplo de otro componentes. sI tienes funciones que devuelven renderización visual si que puedes mantenerlas aquí. El objetivo es separar la parte lógica de la visual

export type TableLayout = 'auto' | 'fixed';

export type ColumnAlign = 'start' | 'center' | 'end';

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Repasa si aquí te falta la documentación por comentarios mdx para storybook (ejemplo en otro componentes tb)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants