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

Emits

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

Column Settings

Goals