lyraus-ui

LyrausTable Vue.js Component

Overview

The LyrausTable component is a versatile table component designed for displaying tabular data in Vue.js applications. It provides various features such as pagination, sticky columns, sorting, filtering, and customizable column rendering.

Installation

npm install lyraus-ui

Usage:

<script>
  import { LyrausTable } from "lyraus-ui";
</script>

<template>
  ...
  <LyrausTable :data="List" :columns="columns" />
  ...
</template>

Column Object

Props	Description	Example	Type	Default
key	Identifier for using data.	"orderNo"	String
label	Column title (optional).	Order Number	String
width	You have to give width to use sticky option (optional).	80	Number
isDate	Changes the date format (optional).	true	Boolean	false
dontDisplay	To provent displaying values for a column (optional).	true	Boolean	false
center	Centers the slot component (optional).	true	Boolean	false
maxLength	Limit the displayed text to a specified length (optional).	14	Number
extraKeys	Extra data to show in same column (optional).	["unitType"]	Array

Table Props

Props	Description	Example	Type	Default
columns	An array of objects representing the columns of the table. Each object should contain key, label, and width properties.	[{ key: "orderNo", label: "Order No", width: 90, isDate:false, extraKeys=["unitType"] }]	Array
data	An array of objects representing the rows of data to be displayed in the table.	[{orderNo: 85}]	Array
pageCount	Total count of rows in the entire dataset (optional).	16	Number
pageProp	You have to give your currentPage state to this prop to persist the currentPage data while changing tabs in the app (optional).	1	Number
searchProp	You have to give your search value to this prop to persist the search data while changing tabs in the app (optional).	1	Number
totalCount	Total count of pages in the paginated data (optional).	324	Number
isLoading	Boolean indicating whether data is being loaded (optional).	true	Boolean	false
checkboxColumn	Enables a checkbox column (optional).	true	Boolean	false
enablePagination	Enables pagination (optional).	true	Boolean	false
useCheckAllBox	Enables a checkbox in the selectable column to select all rows (optional).	true	Boolean	false
indexColumn	Enables index column (optional).	true	Boolean	false
searchBar	Enables a search bar above the table (optional).	true	Boolean	false
rightExtraSlot	Enables an extra slot at top right side of the table(optional).	true	Boolean	false
batchOperations	Enables batch operation controls (optional).	true	Boolean	false
handleSearch	A function to handle search queries (optional).		Function
batchOperationsList	A list of options for batch operations (optional).		Array
clickableColumns	Array of column keys to make columns clickable(optional).	['orderNo', 'deliveredName']	Array
dblClickableColumns	Array of column keys to make columns double clickable(optional).	['orderNo', 'deliveredName']	Array
stickyLeft	Array of column keys to make columns sticky on the left side(optional).	['orderNo', 'deliveredName']	Array
stickyRight	Array of column keys to make columns sticky on the right side(optional).	['dropdownColumn', 'buttonsColumn']	Array
alternateRowBg	Array of two Tailwind color classes for alternating row background colors(optional).	['white', 'gray-100']	Array
innerTable	An array representing the inner table columns (optional).	[{key: "vehicle",label: "Vehicle",width: "100px", extraKeys=["orderNo"]}]	Array
buttonsColumn	Configuration object for rendering custom buttons in a column (optional).	{ label: 'İşlem', width: 90 }	Object
dropdownColumns	Configuration array for rendering dropdowns in a column (optional).	[{ key: 'status' label: 'Durum', width: 180}]	Object
@row-click	Function for handling row click (optional).	(row, index) => handleRowClick(row, index)	Function
@dbl-row-click	Function for handling row double click (optional).	(row, index) => handleDblRowClick(row, index)	Function
@update-selected	Function for updating selected checkboxes (optional).	(val) => handleSelected(val)	Function
@update-search-value	Function for updating search value (optional).	(val) => handleSearchValue(val)	Function
@update-selected-batch-op	Function for updating selected batch opertaion (optional).	(val) => handleBatchOp(val)	Function
@update-current-page	Function for updating current page (optional).	(val) => handleCurrentPage(val)	Function
paginationButtonColor	Tailwind color class of pagination buttons (optional).	red-500	string	gray-600
paginationHoverColor	Tailwind color class of pagination buttons on hover (optional).	red-600	string	gray-700
paginationTextColor	Tailwind color class of pagination button text (optional).	gray-100	string	white
tableHeight	Height of the table (optional).	50vh	string	65vh
containerClass	Tailwind class for the most outer div (optional).		string
operationsDiv	Tailwind class for the div containing batch operations and search bar (optional).	flex justify-between items-center mb-6	string	flex justify-between items-center mb-4
tableClass	Tailwind class for the table element (optional).	min-w-full divide-y divide-red-500	string	min-w-full divide-y divide-gray-200
theadClass	Tailwind class for the table header element (optional).	bg-red-500 sticky top-0 z-10	string	bg-gray-50 sticky top-0 z-10
thClass	Tailwind class for table header cells (optional).	py-4 text-left text-xs font-medium bg-red-500 text-gray-500 tracking-wider border-gray-200	string	py-3 text-left text-xs font-medium bg-gray-50 text-gray-500 tracking-wider border-gray-200
tdClass	Tailwind class for table data cells (optional).	whitespace-nowrap border-gray-200 text-md	string	whitespace-nowrap border-gray-200 text-xs
tbodyClass	Tailwind class for table body (optional).	text-white	string	text-black
innerTableClass	Tailwind class for the inner table element (optional).	divide-gray-200 border-red-500 sticky left-0 w-screen	string	divide-gray-200 border-gray-300 sticky left-0 w-screen
innerTheadClass	Tailwind class for the inner table header element (optional).	bg-red-500	string	bg-gray-50
innerThClass	Tailwind class for inner table header cells (optional).	py-4 text-left text-xs font-medium bg-red-500 text-gray-500 tracking-wider border-gray-200	string	py-2 text-left text-xs font-medium bg-gray-50 text-gray-500 tracking-wider border-gray-200
innerTdClass	Tailwind class for inner table data cells (optional).	whitespace-nowrap text-xs	string	whitespace-nowrap text-xs
innerTbodyClass	Tailwind class for inner table body (optional).	text-white	string
outerDivClass	Tailwind class for the outer div wrapping the table(optional).		string	overflow-auto m-2
innerDivClass	Tailwind class for the inner div wrapping the table (optional).		string

Operations

Search Bar:

How to use default search bar.

<template>
  <LyrausTable
    :data="List"
    :columns="columns"
    :searchBar="true"
    @update-search-value="(val) => handleSearchValue(val)"
    :handleSearch="handleSearch"
  >
    ...
  </LyrausTable>
</template>

<script>
  export default {
      data () {
          return {
              search: ""
          }
      }
      methods: {
          handleSearchValue(val) {
              this.search = val;
          },
          handleSearch() {
              console.log(this.search);
          },
      }
  }
</script>

Batch Operations:

How to use default batch operations.

<template>
  <LyrausTable
    :data="List"
    :columns="columns"
    :batchOperations="true"
    :batchOperationsList="batchOperationsList"
    @update-selected-batch-op="(val) => handleBatchOp(val)"
  >
    ...
  </LyrausTable>
</template>

<script>
  export default {
      data () {
          return {
              batchOperationsList: [
                  {
                      id: 1,
                      name: "Something One",
                  },
                  {
                      id: 2,
                      name: "Something Two",
                  },
              ],
          }
      }
      methods: {
          handleBatchOp(val) {
             handleAction(val);
          },
          handleAction(val) {
              switch (val) {
                  case '1':
                      console.log('Case 1 In');
                      break;
                  case '2':
                      console.log('Case 2 In');
                      break;
                  default:
                      console.log('Unknown action');
              }
          }
      }
  }
</script>

Slots

Search Bar:

Slot to change default search bar.

<LyrausTable :data="List" :columns="columns">
  <template v-slot:searchBar> < Add Your Custom Search Bar > </template>
</LyrausTable>

Extra Top Right Slot:

Slot for custom component at top right side of the table.

<LyrausTable :data="List" :columns="columns">
  <template v-slot:rightExtra> < Add Your Custom Component > </template>
</LyrausTable>

Batch Operations:

Slot to change default batch operations.

<LyrausTable :data="List" :columns="columns" :batchOperations="true">
  <template v-slot:batchOperations>
    < Add Your Custom Batch Operations Component >
  </template>
</LyrausTable>

Sort Button:

Slot for custom sort buttons in table headers.

<LyrausTable :data="List" :columns="columns">
  <template v-slot:sortButton="{ columnKey }">
    <button
      v-if="columnKey === 'orderNo'"
      class="pr-1"
      @click="triggerSort(columnKey, 'Artan')"
    >
      <i class="fas fa-sort"></i>
    </button>
    <button
      v-if="columnKey === 'outpointAdress'"
      class="pr-1"
      @click="triggerSortTwo(columnKey, 'Artan')"
    >
      <i class="fas fa-sort"></i>
    </button>
  </template>
</LyrausTable>

Filter Button:

Slot for custom filter buttons in table headers.

<LyrausTable :data="List" :columns="columns">
  <template v-slot:filterButton="{ columnKey }">
    <TableStatusPanel
      v-if="columnKey === 'outpointAdress'"
      class="h-4 w-4"
      :statusList="receivedNameStatusList"
      :initialStatus="filterType"
      @setStatusFilter="(val) => (val, handleFilter(val))"
    />
  </template>
</LyrausTable>

Column Dropdown:

Slot for custom dropdowns in column. To use this you have to add dropdownColumn prop. If you want this to stick right side of the screen add :stickyRight=['dropdownColumn'] prop.

<LyrausTable
  :data="List"
  :columns="columns"
  :dropdownColumn="[
      { key: 'Durum', label: 'Durum', width: 180 },
    ]"
>
  <template v-slot:colDropdown="{ item, dropdownKey }">
    <div
      v-if="dropdownKey === 'dropdownColumnDurum'"
      class="table-td w-36 border-r border-opacity-20"
    >
      <ChangeStatus
        :plaque="item.vehicle"
        :defaultTitle="item.stateName"
        :stateId="item.stateId"
        :typeId="item.typeId"
        :planId="item.id"
        :orderNo="item.orderNo"
        :note="item.note"
        @changeVehicle="
                    () => ((selected = item), $modal.show('change-vehicle-modal'))
                "
        @refresh="() => getAll()"
        @vehicleStatu="
                    (r) => (
                        ($refs.vehicleStatu.modalData = {
                            detail: item,
                            activeStatu: r,
                        }),
                    $refs.vehicleStatu.show()
                )
                "
      />
    </div>
  </template>
</LyrausTable>

Column Buttons:

Slot for custom buttons in a column. To use this you have to add buttonsColumn prop. If you want this to stick right side of the screen add :stickyRight=['buttonsColumn'] prop.

<LyrausTable
  :data="List"
  :columns="columns"
  :buttonsColumn="{ label: 'İşlem', width: 90 }"
>
  <template v-slot:colButtons="{ item, index }">
    <div class="flex items-center justify-end space-x-2 px-2">
      <button
        class="px-1 rounded text-sm"
        :disabled="isDisabled"
        @click="editData(item, index)"
      >
        <i class="fas fa-edit"></i>
      </button>
    </div>
    <div class="flex items-center justify-end space-x-2 px-2">
      <button
        class="px-1 rounded text-sm"
        :disabled="isDisabled"
        @click="deleteData(item, index)"
      >
        <i class="fas fa-trash"></i>
      </button>
    </div>
  </template>
</LyrausTable>

Row Buttons:

Slot for custom buttons in each row.

<LyrausTable :data="List" :columns="columns">
  <template v-slot:rowButtons="{ item, index, columnKey }">
    <button
      v-if="columnKey === 'receivedName'"
      @click="handleName(item, index)"
    >
      <img class="w-5 h-5 ml-3" src="../assets/planing/filteredit.svg" alt="" />
    </button>
    <button
      v-if="columnKey === 'outpointAdress'"
      @click="handleLocation(item, index)"
    >
      <img class="w-5 h-5 ml-3" src="../assets/planing/location.svg" alt="" />
    </button>
  </template>
</LyrausTable>