am_table_vue v2.2.2

am_table_vuejs_componenet

This template should help you get started with Vue 3 development as a ready-made table that offers various services and integrates easily with various projects

Demo

Discover Demo.

Features

• Sorting
  • Allow users to click on table headers to sort data in ascending or descending order.
• Filtering
  • Enable filtering of data based on different types, such as text, numbers, dates, etc.
  • Implement filter inputs or dropdowns for each column to allow users to enter filter criteria.
  • Apply filters dynamically as users input their criteria.
• Pagination
  • Divide the data into pages and display a set number of rows per page.
  • Provide pagination controls (e.g., previous, next, page numbers) to navigate between pages.
  • Allow users to configure the number of rows per page.
• Search
  • mplement a search input to allow users to search for data by any field.
  • Dynamically update the table to display only the rows that match the search criteria.
  • Provide options to perform case-sensitive or case-insensitive searches.
• Card View
  • Provide an option to switch between table view and card view.
  • Display relevant information in the card, including images, titles, descriptions, etc.
• Responsive Design
  • Ensure that the table or card view is responsive and adjusts to different screen sizes.
  • responsive behavior for columns, pagination, and any other relevant elements.
• Dark mode
• hide fields
  • You can hide fields as simply as possible
• Selected Rows
  • You can Select Rows by Checkbox for export or perform other operations

Installation

Install amtablevuecomponenet with npm

  npm install am_table_vue
  npm i am_table_vue

Usage/Examples

<template>
  <AmhVueTable
    :data="state.data"
    :columns="state.columns"
    :config="state.config"
  >
    <!-- to render the html code -->
    <template v-slot="{ column, row }">
      <div v-if="column.title == 'Actions'">
        <button @click="add(row.name)">add</button>
      </div>
    </template>
  </AmhVueTable>
</template>
<script setup>
   import { reactive } from "vue";
  import AmhVueTable from "am_table_vue";
   // import css
   import "am_table_vue/dist/style.css";

   const state = reactive({
     data: [
       {
         name: "ahmed",
         age: 22,
         adresse:'Tamri Agadir'
         aviable: 1,
         date: new Date("12/05/2022"),
         image: "https://via.placeholder.com/640x480.png/0033aa?text=dolore",
       },
       {
         name: "hasan",
         age: 33,
         adresse:'Taghazout Agadir',
         aviable: 1,
         date: new Date("12/06/2022"),
         image: "https://via.placeholder.com/640x480.png/0033aa?text=dolore",
       },
     ],

     columns: [
       {
         title: "Name",
         field: "name",
         EnableFilter: true,
         sortable: true,
         filterOptions: {
           InputType: "text",
           placeholder: "filter By Name",
         },
       },
        {
       title: "Adresse",
       field: "adresse",
       hidden:true,
       EnableFilter: true,
       sortable: true,
       filterOptions: {
         InputType: "text",
         placeholder: "filter By Name",
       },
     },

       {
         title: "AGE",
         field: "age",
         EnableFilter: true,
         sortable: true,
         filterOptions: {
           InputType: "text",
           placeholder: "filter By age",
         },
       },
       {
         title: "Aviable",
         field: "aviable",
         EnableFilter: true,
         sortable: true,
         filterOptions: {
           InputType: "select",
           placeholder: "filter By aviablity",
           filterSelectOptions: [
             { title: "all", selected: true },
             { title: "aviable", value: "1" },
             { title: "non aviable", value: "0" },
           ],
         },
       },
       {
         title: "Date",
         field: "date",
         isDate: true,
         dateMomentFormat: "L", // use momentjs formats
         EnableFilter: true,
         filterOptions: {
           InputType: "date",
           placeholder: "filter By Date",
         },
       },
       {
         title: "Image",
         field: "image",
         Cssclass: "imageClass",
         isImage: true,
         EnableFilter: false,
       },
       {
         title: "Actions",
         isHtml: true,
         EnableFilter: false,
       },
     ],
     config: {
       EnableSearch: true,
       searchplaceholder: "Search in Table",
       EnableUseDarkMode: true,
       EnableCardsTemp: true,
       SearchInFields: ["name", "age", "date"],
       EnablePagination: true,
       PaginationConfig: {
         itemsPerPage: 3,
         CurrentPage: 1,
       },
     },
   });

   const add = (name) => {
     console.log(name);
   };
</script>

Available props

Available Events

Explanation of using config props

Here we define the able configuration

config: {

EnableSearch: True or False if you want to enable all table searching,

searchplaceholder: all table searching placeholder,

EnableUseDarkMode: true or false if you want to use dark mode or not,

SearchInFields: "field1", "field2", // Determine the fields that are used in the comprehensive search

EnableCardsTemp: true or false if you want provide an option to switch between table view and card view,

EnablePagination: true or false to enable pagination or not,

PaginationConfig: { // if pagination enbled this object for config the pagination

itemsPerPage: 3, // number of items by page

CurrentPage: 1, // start page or current page

},

},

Explanation of using columns props

Here we define the columns

columns: [ {

title: The defined title for the column that will appear in the table columns,

field:The field as it is in object data in order to fetch the data related to this field,

hidden:true or flase if you want to hide fields or not,

EnableFilter: true or false In order to allow table filtering using this column ,

EnableselectOptions: true or false to allow check rows for export or other operations ,

sortable: true or false In order to allow table sorting using this column ,

isDate: true or false We specify if this field is for the date ,

dateMomentFormat: this field is for the date choose the format from momentjs between 'l', 'LL', 'LLL', 'lll', 'LLLL', 'llll', 'L',

isImage: true or false We specify if this field is for the image ,

isHtml: true or false We specify if this field is for the render html code ,

filterOptions: An object with which we define filter settings { InputType: type of filter input text for number and string or select or date for filtring date,

filterSelectOptions: // if InputType is select { title: 'select option title', value: 'select option value' },

placeholder:"placeholder for filtring input element",

},

},

]

<script setup>
  import { reactive } from "vue";

  const state = reactive({
    // exemple
    columns: [
      {
        title: "Name",
        field: "name",
        isImage: false,
        isHtml: false,
        isDate: false,
        EnableFilter: true,
        sortable: true,
        filterOptions: {
          InputType: "text",
          placeholder: "filter By name",
        },
      },
    ],
  });
</script>

Explanation of using data props

This table contains objects that contain data that populates the table from the field specified in the column for each field

<script setup>
  import { reactive } from "vue";

  const state = reactive({
    data: [
      {
        name: "ahmed",
        age: 22,
        aviable: 1,
        date: new Date("12/05/2022"),
        image: "https://via.placeholder.com/640x480.png/0033aa?text=dolore",
      },
    ],
  });
</script>

hide field

<template>
  <AmhVueTable
    :data="state.data"
    :columns="state.columns"
    :config="state.config"
  >
  </AmhVueTable>
</template>
<script setup>
  import { reactive } from "vue";
  import AmhVueTable from "am_table_vue";
   // import css
   import "am_table_vue/dist/style.css";

  const state = reactive({
   data: [
      {
        name: "ahmed",
        age: 22,
        aviable: 1,
        date: new Date("12/05/2022"),
        image: "https://via.placeholder.com/640x480.png/0033aa?text=dolore",
      },

    ],

    columns: [
      {
        title: "Name",
        field: "name",
        hidden:true , // to hide field name
        EnableFilter: true,
        sortable: true,
        filterOptions: {
          InputType: "text",
          placeholder: "filter By Name",
        },
      },
      {
        title: "AGE",
        field: "age",
        EnableFilter: true,
        sortable: true,
        filterOptions: {
          InputType: "text",
          placeholder: "filter By age",
        },
      },
    ]
     config: {
      EnableSearch: true,
      searchplaceholder: "Search in Table",
      EnableUseDarkMode: true,
      EnableCardsTemp: true,
      SearchInFields: ["name", "age", "date"],
      EnablePagination: true,
      PaginationConfig: {
        itemsPerPage: 3,
        CurrentPage: 1,
      },
    },
  });
</script>

Select Rows field

<template>
  <!-- @SelectedRows-Changed : This event occurs whenever a row selection -->
  <AmhVueTable
    :data="state.data"
    :columns="state.columns"
    :config="state.config"
    @SelectedRows-Changed="GetCheckedData"
  >
  </AmhVueTable>
</template>
<script setup>
  import { reactive } from "vue";
  import AmhVueTable from "am_table_vue";
   // import css
   import "am_table_vue/dist/style.css";

  const state = reactive({
   data: [
      {
        name: "ahmed",
        age: 22,
        aviable: 1,
        date: new Date("12/05/2022"),
        image: "https://via.placeholder.com/640x480.png/0033aa?text=dolore",
      },

    ],

    columns: [
      {
        title: "Name",
        field: "name",
        hidden:false ,
        EnableFilter: true,
        sortable: true,
        filterOptions: {
          InputType: "text",
          placeholder: "filter By Name",
        },
      },
      {
        title: "AGE",
        field: "age",
        EnableFilter: true,
        sortable: true,
        filterOptions: {
          InputType: "text",
          placeholder: "filter By age",
        },
      },
    ]
     config: {
      EnableSearch: true,
      searchplaceholder: "Search in Table",
      EnableUseDarkMode: true,
      EnableCardsTemp: true,
      SearchInFields: ["name", "age", "date"],
      EnablePagination: true,
      EnableselectOptions:true, // Enable Select Rows
      PaginationConfig: {
        itemsPerPage: 3,
        CurrentPage: 1,
      },
    },
  });

  // for use selected data :
  const GetCheckedData = (data) => {
    // selected data
    console.log(data)
  }
</script>

🔗 Links