Skip to content

Conversation

@ronantakizawa
Copy link

πŸ”— Linked issue

Resolves #1353

❓ Type of change

  • πŸ“– Documentation (updates to the documentation, readme or JSdoc annotations)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality like performance)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

This PR adds comprehensive data table examples to improve the beginner-friendliness of shadcn-vue's data table
documentation.

New Components Added:

  • DataTableAdvancedPaginationDemo - Client-side pagination with enhanced controls, page size selectors, and
    navigation
  • DataTableAdvancedFilteringDemo - Multi-level filtering with global search, faceted filters, range
    controls, and active filter management
  • DataTableCrudActionsDemo - Complete CRUD operations with modal dialogs for create, edit, view, and delete
    actions
  • DataTableServerSideDemo - Server-side pagination, sorting, and filtering with API integration simulation
    and loading states
  • DataTableExpandableRowsDemo - Expandable rows with detailed nested content and complex layouts

Documentation Improvements:

  • Restructured data-table.md with beginner-friendly organization
  • Added complexity-based categorization (Basic β†’ Intermediate β†’ Advanced)
  • Included "Quick Start" and "Getting Started Guide" sections
  • Enhanced Table of Contents with clear learning paths

Features Covered:

  • Client-side and server-side data handling
  • Advanced pagination controls with page size selection
  • Comprehensive filtering (global search, faceted filters, range sliders)
  • Full CRUD operations with form validation and toast notifications
  • Modal integration for detailed actions
  • Row selection and bulk operations
  • Expandable rows with rich content layouts
  • Loading states and error handling
  • Debounced search for performance optimization

While these changes pass all tests for the project, automatically generated JSON registry files were not pushed to this PR to make the changes easier to read.

πŸ“Έ Screenshots (if appropriate)

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

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.

[Feature]: Request: Add More Data Table Examples to Improve Beginner-Friendliness (Inspired by Nuxt UI / PrimeVue)

2 participants