mc-data-table

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", } }, }, },