| Name | \r\nAmount | \r\n
|---|---|
| {{ row.name }} | \r\n{{ row.amount.toFixed(2) }} | \r\n
| Total | \r\n{{ total.toFixed(2) }} | \r\n
| Product | \r\nSales | \r\n|
|---|---|---|
| Q1 | \r\nQ2 | \r\n|
| Electronics | \r\n$45,000 | \r\n$52,000 | \r\n
| $38,000 | \r\n$41,000 | \r\n
\r\n
\r\n\r\n```\r\n\r\n### useInputStyles\r\n\r\nCentralized input styling for form components with consistent sizing, states, and dark mode:\r\n\r\n```typescript\r\nimport { useInputStyles } from 'cisse-vue-ui/composables'\r\nimport { ref, computed } from 'vue'\r\n\r\nconst size = ref<'sm' | 'md' | 'lg'>('md')\r\nconst disabled = ref(false)\r\nconst invalid = ref(false)\r\n\r\nconst {\r\n inputClasses, // Classes for input elements\r\n triggerClasses, // Classes for dropdown triggers\r\n wrapperClasses, // Classes for input wrappers\r\n iconClasses, // Classes for input icons\r\n} = useInputStyles({\r\n size,\r\n disabled,\r\n invalid,\r\n focused: computed(() => false)\r\n})\r\n```\r\n\r\nSize variants:\r\n- `sm`: Smaller text (text-sm), reduced padding (px-2.5 py-1.5)\r\n- `md`: Default size (text-sm), standard padding (px-3 py-2)\r\n- `lg`: Larger text (text-base), increased padding (px-4 py-2.5)\r\n\r\n## Table Composables\r\n\r\nPowerful composables for building advanced data tables:\r\n\r\n```typescript\r\nimport {\r\n usePagination,\r\n useTableKeyboardNavigation,\r\n useColumnVisibility,\r\n useColumnResize,\r\n usePinnedRows,\r\n useEditableCell,\r\n useVirtualScroll\r\n} from 'cisse-vue-ui/composables'\r\n```\r\n\r\n### usePagination\r\n\r\nClient-side pagination with page size selector support:\r\n\r\n```typescript\r\nimport { usePagination } from 'cisse-vue-ui/composables'\r\nimport { ref } from 'vue'\r\n\r\nconst items = ref([/* your data */])\r\n\r\nconst {\r\n currentPage, // Current page (1-indexed)\r\n pageSize, // Items per page\r\n totalPages, // Total number of pages\r\n paginatedItems, // Items for current page\r\n startIndex, // First item index (0-indexed)\r\n endIndex, // Last item index (0-indexed)\r\n hasNextPage, // Can go forward?\r\n hasPreviousPage, // Can go back?\r\n goToPage, // Navigate to specific page\r\n nextPage, // Go to next page\r\n previousPage, // Go to previous page\r\n setPageSize, // Change items per page\r\n} = usePagination(items, {\r\n initialPage: 1,\r\n initialPageSize: 10,\r\n pageSizes: [10, 25, 50, 100]\r\n})\r\n```\r\n\r\n```vue\r\n\r\n Dialog Title
\r\n| {{ item.name }} | \r\n \r\n
\r\n
\r\n\r\n | {{ col.label }} | \r\n
|---|
| \r\n {{ item[col.key] }}\r\n | \r\n
| \r\n \r\n | \r\n{{ item.name }} | \r\n \r\n\r\n \r\n
| \r\n \r\n | \r\n{{ item.name }} | \r\n\r\n \r\n | \r\n{{ item.name }} | \r\n \r\n
| \r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n
\r\n
\r\n | {{ startIndex + index + 1 }} | \r\n{{ item.name }} | \r\n \r\n
\r\n
\r\n \r\n\r\n \r\n Card content goes here.
\r\nProduct description
\r\n \r\n\r\n \r\n Click me!
\r\n \r\n\r\n \r\n Settings content
\r\n \r\n Last updated: Today
\r\n \r\n\r\n {{ item.name[0] }}\r\n
\r\n \r\n\r\n \r\n \r\n {{ item.name }}
\r\n{{ item.email }}
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n {{ item.name }}\r\n \r\n\r\n \r\n \r\n {{ item.status }}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n{{ item.name }}
\r\n{{ item.description }}
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n Don't have an account? Sign up\r\n
\r\n \r\n \r\n![\"Logo\"](\"/logo.svg\"){kind=logo}
\r\n \r\n\r\n