claritykit-svelte
Version:
A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility
53 lines • 2.23 kB
TypeScript
import type { TableColumn, TableSort, TableFilter, TablePagination, TableSize, TableVariant } from './types';
interface Props {
data: any[];
columns: TableColumn[];
variant?: TableVariant;
size?: TableSize;
sortable?: boolean;
filterable?: boolean;
selectable?: boolean;
pagination?: Partial<TablePagination> | null;
loading?: boolean;
emptyMessage?: string;
loadingMessage?: string;
stickyHeader?: boolean;
maxHeight?: string | number;
class?: string;
style?: string;
'data-testid'?: string;
onsort?: (sort: TableSort) => void;
onfilter?: (filters: TableFilter[]) => void;
onselectionchange?: (selectedRows: string[]) => void;
onpagechange?: (page: any) => void;
}
/**
* Table
*
* Comprehensive data table component with sorting, filtering, pagination, and selection.
* Designed with ADHD-friendly principles for clear data presentation.
*
* @prop {Array} data - Array of data objects to display
* @prop {Array} columns - Column configuration array
* @prop {string} [variant='default'] - Table variant (default, striped, bordered)
* @prop {string} [size='md'] - Table size (sm, md, lg)
* @prop {boolean} [sortable=true] - Enable sorting functionality
* @prop {boolean} [filterable=false] - Enable filtering functionality
* @prop {boolean} [selectable=false] - Enable row selection
* @prop {Object} [pagination] - Pagination configuration
* @prop {boolean} [loading=false] - Loading state
* @prop {string} [emptyMessage='No data available'] - Message when no data
* @prop {string} [loadingMessage='Loading...'] - Loading message
* @prop {boolean} [stickyHeader=false] - Sticky header on scroll
* @prop {string|number} [maxHeight] - Maximum table height
* @prop {string} [className=''] - Additional CSS classes
*
* @event {Object} sort - Fired when column sort changes
* @event {Array} filter - Fired when filters change
* @event {Object} page-change - Fired when pagination changes
* @event {Array} selection-change - Fired when row selection changes
*/
declare const Table: import("svelte").Component<Props, {}, "">;
type Table = ReturnType<typeof Table>;
export default Table;
//# sourceMappingURL=Table.svelte.d.ts.map