https://github.com/jobinsjp/vue3-datatable

Data table component for Vue3
https://github.com/jobinsjp/vue3-datatable

datatable hacktoberfest vue

Last synced: 3 days ago
JSON representation

Data table component for Vue3

• Host: GitHub
• URL: https://github.com/jobinsjp/vue3-datatable
• Owner: JoBinsJP
• License: other
• Created: 2021-04-08T11:23:06.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-02T15:35:19.000Z (almost 2 years ago)
• Last Synced: 2024-11-24T20:07:43.772Z (3 months ago)
• Topics: datatable, hacktoberfest, vue
• Language: Vue
• Homepage: https://vue3-datatable.netlify.app/
• Size: 440 KB
• Stars: 111
• Watchers: 10
• Forks: 19
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# DataTable - Vue3 Component

> Basic DataTable component for Vue3 in typescript and Composition API. It has basic functionality such as Filter/Search, pagination etc.

[![NPM](https://img.shields.io/npm/v/@jobinsjp/vue3-datatable.svg)](https://www.npmjs.com/package/@jobinsjp/vue3-datatable)

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![Build](https://img.shields.io/travis/JoBinsJP/vue3-datatable?logo=travis)](https://travis-ci.org/JoBinsJP/vue3-datatable)

## [Demo](https://vue3-datatable.netlify.app/)

![DataTable Demo](demo.png)

## Install

```bash

npm install --save @jobinsjp/vue3-datatable

```

or,

```bash

yarn add @jobinsjp/vue3-datatable

```

## Usage

A minimal setup example is presented here using composition api and typescript; though typescript is not necessary to use this package. 

```vue

    

    import { DataTable } from "@jobinsjp/vue3-datatable"

    import "@jobinsjp/vue3-datatable/dist/style.css"

    const data = [

        {

            "id": 1,

            "first_name": "Misti",

            "last_name": "Strase",

            "email": "[email protected]",

            "gender": "Non-binary",

            "ip_address": "151.38.32.165",

        },

        {

            "id": 2,

            "first_name": "Valentina",

            "last_name": "Bonas",

            "email": "[email protected]",

            "gender": "Agender",

            "ip_address": "103.10.225.246",

        },

    ]

```

## Properties

In addition to basic use it you can configure data-table behaviour by applying following properties and template slots.

### Striped

**striped** property

```vue

    

```

### Custom Loader

**loading** property

**loadData** event

```vue

    

        

            
Loading....

        

    


setup() {

    // ...

    const isLoading = ref(false)

    const loadData = async (query) => {

        isLoading.value = true

        // ...

        isLoading.value = false

    }

    return {

        isLoading,

        loadData,

        // ...

        }

}

```

### Clickable Row

**rowClicked** event

```vue

    

    

setup() {

    // ...

    const rowClickHandler = (row) => {

        console.log("Row Clicked", row)

    }

```

### Empty Table

**empty** slot

```vue

import { TableBodyCell } from "@jobinsjp/vue3-datatable"

   

        

            

                No record found.

            

        

    

```

### Custom Row & Column, Paginated, Filter

Documentation, in todo, see code example here: https://github.com/JoBinsJP/vue3-datatable/tree/master/src/components/Tables

## License

MIT © [https://github.com/JoBinsJP/vue3-datatable](https://github.com/JoBinsJP/vue3-datatable)