Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abderrahmaneamerhhi/amtablevuecomponenet
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
https://github.com/abderrahmaneamerhhi/amtablevuecomponenet
component-library components-library dynamic-table dynamic-table-row dynamic-table-view responsive-design tablecomponent tableview vue vuejs vuejs3
Last synced: about 1 month ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/abderrahmaneamerhhi/amtablevuecomponenet
- Owner: AbderrahmaneAmerhhi
- Created: 2023-06-19T14:15:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-04T13:27:16.000Z (about 1 year ago)
- Last Synced: 2023-11-05T13:35:34.320Z (about 1 year ago)
- Topics: component-library, components-library, dynamic-table, dynamic-table-row, dynamic-table-view, responsive-design, tablecomponent, tableview, vue, vuejs, vuejs3
- Language: Vue
- Homepage: https://www.npmjs.com/package/am_table_vue
- Size: 3.36 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://amtabledemo.netlify.app/tableView#/).
## 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
```bash or terminal
npm install am_table_vue
npm i am_table_vue
```
## Usage/Examples
```html
add
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);
};
```
## Available props
| Attribute | Type | Default | required | description |
| :-------- | :--------------: | --------: | :------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| data | Array of objects | null , [] | true | This attribute define the data to be displayed in the table |
| columns | Array of objects | null ,[] | true | This attribute defines which columns will be displayed in the table, if you will allow fields to be filtered or sorted by this column, if you want to hide it can be specified here |
| config | object | {} | true | This attribute defines table settings such as applying pagination, dark mode, and table search, as well as allowing data to be displayed as cards |
## Available Events
| Events | Description |
| :-------------------- | :--------------------------------------------------------------------------------------------: |
| @SelectedRows-Changed | This event occurs whenever a row selection when you enbale EnableselectOption in cofnfig props |
## 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",
},
},
]
```html
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",
},
},
],
});
```
## 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
```html
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",
},
],
});
```
## hide field
```html
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,
},
},
});
```
## Select Rows field
```html
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)
}
```
## 🔗 Links
[](https://main--abderrahmaneamerrhiportfoliov2.netlify.app/)
[](https://www.linkedin.com/in/abderrahmane-amerrhi-807b40201/)