cmp-table (under construction)

vue 3 data table

cmp-table is simple but cusomizable data table.

text

cd 
npm i
node app

main props

property name	type	sample
items	PropType<Item[]>	`const items = ref<Item[]>([{ team: 'dream team'});`
headers	PropType<Header[]>	`const headers = ref<Header[]>([{ title: 'team', field: 'team', sortable: false, filterable:false, expandable: true }]);`
viewOptions	PropType	`const options = ref<ViewOptions>({page: 1,rowsPerPage: 3,orderBy: { team: 'desc' }, where: {}, });`

additional table props

property name	type	description
caption	string	table caption
searchPlaceholder	string	global filter text placeholder
striped	boolean	use striped css class on rows
emptyMessage	string	no data text
hideFooter	boolean	hide table footer
hideHeader	boolean	hide table header
itemsSelected	PropType<Item[]> or null	array of selected items
loading	boolean	show loading spiner
showIndex	boolean	show row index as first column (autocalculated)
tableClassName	string	table css class
headerClassName	string	table header css class
scrollHeight	number	table height in pixel. to enable scrolling
scrollWidth	number	table width in pixel. to enable scrolling

column slots

template name	description
customize-headers	fully custom table header (custom THEAD)
header-prepend	first slot after THEAD
header-{YourFieldName}	TH column slot
header-append	last slot after all rows in THEAD

row slots

event name	description
clickRow	click on row
contextmenuRow	context menu click

MIT