Skip to content

feat: Add comprehensive Data Table Examples #1386

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from

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