mahailiang999-creator/public-components-skill
Overview
This skill helps front-end developers understand and use the @arim-aisdc/public-components library. It summarizes core components, configuration patterns, and practical integration tips for building table-driven UIs, forms, themes, and permission-aware features. The guidance focuses on TableMax, global ConfigProvider, filters, permission controls, and common hooks.
How this skill works
The skill explains what each component does, its key props, and typical usage patterns. It highlights TableMax's full API for pagination, filtering, sorting, editing, virtual lists and caching. It also covers ConfigProvider global options, PermissionProvider APIs, the Filter component family, and useful hooks like useConfig and usePageCacheState. Practical examples and best-practice recommendations are included to speed implementation and avoid common pitfalls.
When to use it
- When building advanced data tables requiring pagination, filters, editing, export and cache.
- When you need a consistent global config: theme variables, locale, date formats and table defaults.
- When implementing role-based UI restrictions or conditionally rendering controls.
- When creating dynamic search UIs with filter components (select, slider, number, color, switch).
- When you want built-in helpers for virtual scrolling, drag-and-drop rows, split panes and modals.
Best practices
- Always provide a unique tableId for TableMax to enable reliable caching and user-specific state.
- Use ConfigProvider for global theme, locale and table defaults to keep components consistent.
- Prefer onFilteringChange and onSortingChange for controlled, backend-driven operations.
- Enable only required TableMax features (virtual rows, editing, drag) to reduce runtime cost.
- Define clear permission strings and use PermissionProvider + Restricted for feature gating.
Example use cases
- A dashboard table with server-side pagination, multi-column sorting, column pinning and export.
- An admin panel that shows/hides edit and delete buttons via PermissionProvider and Restricted.
- A search page using QueryFilter and FilterSelect/FilterSlider to build complex queries.
- A form-driven CRUD page using SchemaForm or CustomForm with dynamic edit options.
- A responsive layout with SplitPane, CenterModal and CacheTabs to preserve page state.
FAQ
Give each TableMax a unique tableId and configure ConfigProvider (userId and cacheMaxAge). TableMax will cache column settings, filters and pagination.
Should filtering and sorting be client or server side?
Use client-side for small datasets and fast UX. For large datasets or authoritative queries, implement manualFiltering/manualSorting with onFilteringChange/onSortingChange to delegate to the backend.
