Auto Table

Komponen tabel yang berfitur lengkap dan dapat disesuaikan dengan dukungan untuk penyajian data sinkron dan asinkron. Mendukung pengurutan, pencarian, penomoran halaman, dan penyesuaian berbasis slot.

Skeleton

Slots and Templates

Slot Name	Required	Description	Notes
popup	❌	Optional notification above the card/table	Useful for displaying alert/info for the table context
customRows	❌	Render rows manually instead of default rendering	Grants full control over row layout
loading	❌	Replace the default loading state	Override built-in loading with your own template
error	❌	Replace the default error state	Same as above, for error UX
empty	❌	Custom empty-state UI when no data	Shows when no rows match (either due to filtering or content is empty)
prepend	❌	Content rendered before table (above)	Can be used for filters, descriptions, etc.
append	❌	Content rendered after table (below)	Can be used for legends, summaries, etc.

Props

Prop	Type	Default	Required	Description
headers	Array	–	✅	Array of column definitions. Can be array of strings or objects with keys: name, label, sortable, sortLogic, searchable, searchLogic, class.
content	Array	[]	❌	Array of data to be displayed in the table. Required if not async.
withIndex	Boolean	false	❌	Show index column on the left side of the table.
withSearch	Boolean	false	❌	Enable global search field.
startPage	Number	1	❌	Initial page to render.
totalData	Number	–	⚠️*	Required when asyncTable is true to calculate pagination correctly.
perPage	Number/String	20	❌	Number of items per page. "all" also accepted.
perPageOptions	Array<Number>	[5, 10, 20, 25, 50, 100, 250]	❌	Available options for page size dropdown.
asyncTable	Boolean	false	❌	Set to true if data is fetched from API (server-side table).
isLoading	Boolean	false	❌	Show loading state for async tables.
isError	Boolean	false	❌	Show error state for async tables.
onClickFilter	Function	–	❌	Function triggered when filter button is clicked.

Events

Event	Payload	Trigger	Description
manipulateTable	{ type, searchProps, sortProps, pageProps }	on mount, page/sort/search change	Emitted when table needs external data (e.g., asyncTable). Payload contains the action type (search, sort, page-change, etc).
	→ type – string: 'init', 'search', 'sort', 'page-change', 'per-page-change', 'refresh'		Type of table interaction.
	→ searchProps: { find: String, searchIn: String[] }		Search keyword and which fields to search.
	→ sortProps: { index: Number, label: String, asc: Boolean }		Current sort configuration.
	→ pageProps: { pos: Number, perPage: Number | 'all' }		Current page and perPage settings.
clickFilter	–	on filter button click	Emitted when user clicks the optional filter button.