Efsane Table

For Vue 2 Framework.

Version 1.1.5 is Released 🎉✨

Show Demo and Detail Documentation

New Features

Accordion Mechanic

• You can add the value "only-one" so that only one of the opened accordion lines remains open.

Width Overflow

• You can give "auto" if you want your table to expand across the content horizontally.

Pagination Position

• now you can add the "top" value to the pagination-position and put it at the top. The default value of this field is "bottom"

Draggable Columns Dynamic Columns From Data Resizable Columns Editable Columns Editable Design

Efsane Table setup

npm install efsane-table

main.js (globally component)

import EfsaneTable from 'efsane-table'
Vue.component('EfsaneTable',EfsaneTable);

usage

<efsane-table
    :data="tableData"
    :default-columns="columns"
    table-name="orders"
>
</efsane-table>

Default Columns

Example Definition

        [{
          header: "Name",
          name:"name",
          size:"60",
          copyable:true,
          list_manipulation:"first",
          text_manipulation:"upper",
          downloadable:true,
          type:"data"
        },{
          header: "Position",
          name:"position",
          visibility:"exists",
          visibilityCondition:"name",
          size:"60",
          type:"slot"
        },{
          header: "#",
          name:"row_number",
          size:"60",
          type:"row_number"
        },{
          header: "#",
          name:"checkbox",
          size:"60",
          type:"checkbox"
        },
        {
          header: "Logo",
          name:"team.logo",
          visibility:"exists",
          size:"1fr",
          type:"data",
          usage:"image-src"
        }]

Props

Prop Name	Data Type	Required	Sync Modifier	Default Value	Description	Available Version	options
table-name	String	true	false	efsaneTable		1.1.0
data	Array	true	false			1.1.0
default-settings	Object	true	false			1.1.0
dynamic	Boolean	false	false	false		1.1.0
save	Boolean	false	false	false		1.1.0
reload	Boolean	false	false	false		1.1.0
pagination	Boolean	false	false	false		1.1.0
accordion	Boolean	false	false	false		1.1.0
accordion-match-value	String,Number,Boolean, Array	false	false			1.1.0
transition	Boolean	false	false	false		Not Yet
transition-const-field	String	false	false			Not Yet
hide-header	Boolean	false	false	false		1.1.0
editable	Boolean	false	false			1.1.0
output-type	String	false	false	default		1.1.0	default, base64
data-count	Number	false	false	0		1.1.0
limit	Number	false	false	25		1.1.0
ordering	String	false	true			1.1.0
pagination-offset	String	false	true	0		1.1.0
table-item-definition	String	false	false	items		1.1.0
columns	Array	false	false			1.1.0
reload-function	Function	false	false			1.1.0
default-columns	Array	false	false			1.1.0
accordion-mechanic	String	false	false	all-open, only-one	all-open	1.1.5
pagination-position	String	false	false	bottom, top	bottom	1.1.5
width-overflow	String	false	false	hidden, auto/td>	hidden	1.1.5
actions	Array	false	false			Not Yet
default-actions	Array	false	false			Not Yet

Emits

Emit Usage	Emit Name	Required	Return Type	Description	Available
columns	Columns	false	Array or Base64 String		1.1.0
actions	Actions	false	Array or Base64 String		1.1.0
list-all-selected-trigger	All Selected List	false	Boolean		1.1.0
data-all-selected-trigger	All Selected Filtered List	false	Boolean		1.1.0
input	Selected Data	false	Array		1.1.0
change-offset	Selected Data	false	Number		1.1.0
change-ordering	Ordering Data Property Name	false	String		1.1.0
settings	Settings Object	false	Object		1.1.0

Table Settings

Example Settings (All Default Values)

settings:{
        tableBackgroundColor:"#fff",
        tableTextColor:"#343A40",
        headerBackgroundColor:"#F7F9F9",
        headerTextColor: "#343A40",
        topbarHeight:"28px",
        headerHeight:"30px",
        rowHeight:null,
        lineGap:null,
        rowHoverStatus:true,
        rowSelectedColorStatus:true,
        rowScrollStatus:false,
        selectedTabStatus:true,
        rowHoverColor:"#EEEEEE",
        tooltipBackgroundColor:"#343A40",
        tooltipTextColor:"#ffffff",
        rowSelectedColor:"#81D4FA",
        rowSelectedAccordionColor:"#D1C4E9",
        rowScrollSize:2,
        rowBorderTopColor:"#EEEEEE",
        rowBorderTopSize:0,
        firstRowBorderTop:false,
        rowBorderBottomColor:"#EEEEEE",
        rowBorderBottomSize:1,
        lastRowBorderBottom:false,
        showMenuStatus:2,
        rowBorderLeftSize:0,
        rowBorderLeftColor:"#EEEEEE",
        rowBorderRightSize:0,
        rowBorderRightColor:"#EEEEEE",
        bodyBorderSize:1,
        bodyBorderColor:"#EEEEEE",
        tableBodyHeight:"65vh",
        paginationHeight:"35px",
        resizing:false,
        shortcutSelectAllToggle:"alt+q",
        shortcutSelectFilteredAll:"shift+f",
      }

Setting Usage Name	Type	Required	Setting Name	Default Vlaue	Description	Available Version
tableBackgroundColor	Hexadecimal, Color Name or RGB	false	Table Rows Background Color	#fff		1.1.0
tableTextColor	Hexadecimal, Color Name or RGB	false	Table Rows Text Color	#343A40		1.1.0
headerBackgroundColor	Hexadecimal, Color Name or RGB	false	Header Background Color	#F7F9F9		1.1.0
headerTextColor	Hexadecimal, Color Name or RGB	false	Header Text Color	#343A40		1.1.0
rowHoverColor	Hexadecimal, Color Name or RGB	false	Row Hover Animation Background Color	#EEEEEE		1.1.0
tooltipBackgroundColor	Hexadecimal, Color Name or RGB	false	Tooltip Background Color	#343A40		1.1.0
tooltipTextColor	Hexadecimal, Color Name or RGB	false	Tooltip Text Color	#ffffff		1.1.0
rowSelectedColor	Hexadecimal, Color Name or RGB	false	Table Row Selected Color	#81D4FA		1.1.0
rowSelectedAccordionColor	Hexadecimal, Color Name or RGB	false	Table Rows Background Color While Accordion Open	#D1C4E9		1.1.0
rowBorderTopColor	Hexadecimal, Color Name or RGB	false	Row Border Top Color	#EEEEEE		1.1.0
rowBorderBottomColor	Hexadecimal, Color Name or RGB	false	Row Border Bottom Color	#EEEEEE		1.1.0
rowBorderLeftColor	Hexadecimal, Color Name or RGB	false	Row Border Left Color	#EEEEEE		1.1.0
rowBorderRightColor	Hexadecimal, Color Name or RGB	false	Row Border Right Color	#EEEEEE		1.1.0
bodyBorderColor	Hexadecimal, Color Name or RGB	false	Body Border Color	#EEEEEE		1.1.0
topbarHeight	px	false	Top Bar Height Size	28px		1.1.0
headerHeight	px	false	Header Height Size	30px		1.1.0
tableBodyHeight	px, vh	false	Table Height Size	65vh		1.1.0
paginationHeight	px, vh	false	Pagination Height Size	35px		1.1.0
rowHeight	px	false	Rows Height Size			1.1.0
lineGap	px	false	Rows Gap Size			1.1.0
rowScrollSize	Number	false	Table Scroll Width Size	2		1.1.0
rowBorderTopSize	Number	false	Rows Border Top Height Size	0		1.1.0
rowBorderBottomSize	Number	false	Rows Border Bottom Height Size	1		1.1.0
rowBorderLeftSize	Number	false	Rows Border Left Height Size	0		1.1.0
rowBorderRightSize	Number	false	Rows Border Right Height Size	0		1.1.0
bodyBorderSize	Number	false	Body Border Size	1		1.1.0
showMenuStatus	Number	false	Show Menu Status	2		1.1.0
rowHoverStatus	Boolean	false	Rows Hover Status	true		1.1.0
rowSelectedColorStatus	Boolean	false	Rows Selected Color Status	true		1.1.0
rowScrollStatus	Boolean	false	Table Scroll Status	false		1.1.0
selectedTabStatus	Boolean	false	Selected Tab Status	true		1.1.0
firstRowBorderTop	Boolean	false	First Row Border Top Status	false		1.1.0
lastRowBorderBottom	Boolean	false	Last Row Border Top Status	false		1.1.0
resizing	Boolean	false	Resizing Status	false		1.1.0
shortcutSelectAllToggle	String	false	Select All Shortcut	alt+q		1.1.0
shortcutSelectFilteredAll	String	false	Select All Filtered Data Shortcut	shift+f		1.1.0

Column Settings

settingName	type	required	name	default	options	description	available
type	String	true	Type	data	data,slot,action,alert,more,checkbox,row-number		1.1.0
tooltip	String	false	Tooltip				1.1.0
header	String	false	Header	[data property name as title case]			1.1.0
listManipulation	String	false	List Manipulation	first	first,comma,sum		1.1.0
size	fr,px	true	Size				1.1.0
size	String(fr,px)	true	Size				1.1.0
usage	String	false	Usage	default	default,image-src		1.1.0
copyable	Boolean	false	Copyable	false	true,false		1.1.0
downloadable	Boolean	false	Downloadable	false	true,false		1.1.0
textManipulation	String	false	Text Manipulation	default	default,upper,lower,title,capitalize		1.1.0
align	String	false	Align	center	left,center,right		1.1.0
visibility	String	false	Visibility	always	always,exists	If a column will only be displayed if there is data, you can solve this problem by selecting the column's visibility setting "exists if". Also, make sure that the "column auto visibility" setting is enabled in the table settings.	1.2.0
visibility condition	String	false	VisibilityCondition	[self column]	[exists columns]	If the column will appear according to another column, the name of that column should be entered here.	1.2.0

Goals

goalTitle	description	target
Self Ordering	The Table will can sort the data without backend	1.2.0
Data Types	The Table Columns can be different types likes Date, Datetime, Number, Link, Phone, Zipcode etc.	1.2.0
Data Types Method	The Data Types can modification like Date Format for Date Type or can add target attribute for Link Type	1.2.0
Actions	The Table can give to user some action API's and users can create own action columns	1.2.0
Alerts	The Table can give to user some alert Icons, Prefixs, Styles and users can create own alerts	1.2.0
Data Tree Tooltip	The Table can show data tree in tooltip if columns data object in objects or array in arrays or etc.	1.2.0
Conditional Flip Columns	The Table can calculate column condition and then show correct data in column	1.2.0
Detail Tabs	The Table can separate selected items with multi tabs alson this tabs may under or over table	1.2.0
Multi Mission Header	Header shouldn't contain only data header also can be contain different contents or actions buttons	1.2.0
Table Themes	The Table can customize different themes	1.2.0