mc-data-table
v0.1.0
Published
- Smart UI datatable, built using vue3 composition API
Downloads
2
Maintainers
Readme
mConnect Datatable | @mconnect/mc-data-table
- Smart UI datatable, built using vue3 composition API
Installation
npm install @mconnect/mc-data-table
Components and Features
- screen short
- McDataTable: entry point for defining the table options, structure and contents
- McPageLimit: select the records per page
- McPageNav: page navigation features - first, last, previous, next and subset of intermediary pages
- McTable: The table structure (column headers) and contents
- McTableMessage: indicate the current table records information, by page navigation and records total
- McTablesNoData: a component to display when there are no records to display
- McTableSearch: to filter table contents/records, by search keyword(s)
Usage Specifications
- import mcDatatable component as a component into your UI view/page or as an app-plugin
- activate the mcDatatable component in your UI template, and provide the required and/or optional props
- usage example
- Required and optional specifications
- McDataTable: props (required and optional)
- Required props: dataFields (Array) and dataItems (Array)
- Optional props: dataTotal, paging, pageStart, pageLimits (Array), tableStyle, sortStyle
- dataFields: => dataSpecs.ts
- dataItems: => provider data records props : { dataFields: { type : Array, required: true, }, dataItems : { type : Array, required: true }, dataTotal : { type : Number, default: 0, }, paging : { type : Boolean, default: true, }, pageStart : { type : Number, default: 1, }, pageLimits: { type : Array, default: () => [10, 20, 30, 50, 100, 200], }, tableStyle: { type : Object, default: () => { return { table : "w3-table w3-striped w3-border w3-bordered w3-hoverable", tableHeader: "w3-red", tableBody : "w3-hover", } }, }, sortStyle : { type : Object, default: () => { return { asc : "fa fa-caret-up", desc: "fa fa-caret-down", } }, }, },