Bulma themed, VueJS powered Datatable with server-side loading and JSON template setup

  • By Laravel Enso
  • Last update: Dec 28, 2022
  • Comments: 12

Tables

Codacy Badge StyleCI License Total Downloads Latest Stable Version

Data Table package with server-side processing, unlimited exporting and VueJS components. Quickly build any complex table based on a JSON template.

This package can work independently of the Enso ecosystem.

The front end assets that utilize this api are present in the tables package.

For live examples and demos, you may visit laravel-enso.com

Watch the demo

click on the photo to view a short demo in compatible browsers

Themed screenshot

click on the photo to view an export demo in compatible browsers

Installation, Configuration & Usage

Be sure to check out the full documentation for this package available at docs.laravel-enso.com

Contributions

are welcome. Pull requests are great, but issues are good too.

License

This package is released under the MIT license.

Github

https://github.com/laravel-enso/vuedatatable

Comments(12)

  • 1

    Unable to install on Laravel 5.8

    This is a question.

    Prerequisites

    • [Yes] Are you running the latest version?
    • [Yes] Are you reporting to the correct repository?
    • [Yes] Did you check the documentation?
    • [Yes] Did you perform a cursory search?

    I am trying to install this on laravel

    import axios from 'axios';
    import VueTable from './components/enso/vuedatatable/VueTable.vue';
    import Toastr from './components/enso/bulma/toastr';
    
    import fontawesome from '@fortawesome/fontawesome';
    import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
    
    Vue.component('fa', FontAwesomeIcon);
    
    Vue.use(Toastr, {
        position: 'right',
        duration: 3000,
        closeButton: true,
    });
    
    window.axios = axios;
    

    Toastr and VueTable were not created with that directory. I have been able to create the Toastr file but can not install VueTable as its not in the correct directory?

  • 2

    Entries count <> Rows if you have deleted rows

    This is a bug.

    Prerequisites

    • [x] Are you running the latest version?
    • [x] Are you reporting to the correct repository?
    • [x] Did you check the documentation?
    • [x] Did you perform a cursory search?

    Description

    The entries count in table footer is wrong if you have soft deleted rows in your database. image

    Steps to Reproduce

    1. Create a table for a model which uses soft deletes
    2. Delete one entry
    3. Check sum row in footer

    Expected behavior

    In my screenshot the footer row should be "From 1 to 12 of 12 entries"

    Actual behavior

    In my screenshot the footer row is "From 1 to 12 of 14 entries"

    • I have 2 soft deleted rows in table
  • 3

    Default sort column in template

    This is a feature request.

    Prerequisites

    • [x] Are you running the latest version?
    • [x] Are you reporting to the correct repository?
    • [x] Did you check the documentation?
    • [x] Did you perform a cursory search?

    Description

    Allow the table template to include a default column for sorting

  • 4

    Datatable how add multiple selected values in 1 column

    This is a bug | feature request.

    Prerequisites

    • [ ] Are you running the latest version?
    • [x] Are you reporting to the correct repository?
    • [ ] Did you check the documentation?
    • [ ] Did you perform a cursory search?

    Description

    i have to add column that contain multiple options. i used group_concat. but datatable's total value changed wrong cause of group by

    Steps to Reproduce

    Expected behavior

    If possible add a column to menus index datatable show which roles selected.

    Actual behavior

  • 5

    Undefined property: stdClass::$nullLast

    This is a bug.

    Prerequisites

    • [x] Are you running the latest version?
    • [x] Are you reporting to the correct repository?
    • [x] Did you check the documentation?
    • [x] Did you perform a cursory search?

    Description

    Crash sorting -

    exception: "ErrorException"
    file: "..../vendor/laravel-enso/vuedatatable/src/app/Classes/Table/Builder.php"
    line: 141
    message: "Undefined property: stdClass::$nullLast"
    

    In doc: https://docs.laravel-enso.com/packages/vue-datatable.html#template

    nullLast, optional, makes the sorting on this column sort all null values last

    Steps to Reproduce

    1. Use only laravel-enso/VueDatatable without Enso
    2. Just updated to last version
    • Enso core with all enso packages (+migrations) included - why? No need it.
    1. All sorting was broken.

    Example template:

    {
        "routePrefix": "calls",
        "dataRouteSuffix": "data",
        "crtNo": false,
        "selectable": true,
        "buttons": [     ],
        "columns": [
            
            {
                "label": "ID",
                "name": "id",
                "data": "calls.id",
                "meta": [
                    "searchable",
                    "sortable"
                ]
            }
            , {
                "label": "Status",
                "name": "status",
                "data": "calls.status",
                "meta": [
                    "sortable",
                    "slot"
                ]
            }
            , {
                "label": "Date / time",
                "name": "start_time",
                "data": "start_time",
                "meta": [
                    "slot",
                    "sortable"
                ]
            }
       ]
    }
    

    Expected behavior

    Actual behavior

  • 6

    Make number format configurable

    At the moment decimal numbers in Datatables are rendered with . as decimal sep. and , as thousands sep. - It would be nice if we can configure this.

    Maybe a fix in combination with: https://github.com/laravel-enso/Core/issues/26

  • 7

    Add customfilters to datatable

    This is a feature request.

    Description

    if request has custom filter fields how catch them in ExampleTable.php query method.

    Steps to Reproduce

    Expected behavior

    if filters have custom field i want to join other table and add multiple where condition to query. where multiple condition check required.

    Actual behavior

    filters add column it only check equal that field

  • 8

    Allow searching for/filter by enum

    This is a bug.

    Prerequisites

    • [x] Are you running the latest version?
    • [x] Are you reporting to the correct repository?
    • [x] Did you check the documentation?
    • [x] Did you perform a cursory search?

    Description

    It should be possible to search for an enum value inside a vue datatable Maybe inside tables/app/Services/Data/Filters/Search.php the columns that have enums set in meta may be treated differently and be queried with their mapping from enum.

    Steps to Reproduce

    Search after keyword 'Miss' inside people section here: https://www.laravel-enso.com/administration/people/

    Expected behavior

    We expect to see all the persons with title 'Miss' as results.

    Actual behavior

    We get persons with title 'Mr', 'Ms' and 'Miss' as results, this is unexpected

  • 9

    Number interval filters not working

    This is a bug.

    Prerequisites

    • [x] Are you running the latest version?
    • [x] Are you reporting to the correct repository?
    • [x] Did you check the documentation?
    • [x] Did you perform a cursory search?

    Description

    Number interval filters are not working because in Filters.php it tries to format the number as date

    In src/app/Services/Table/Filters.php on Line 123 and 145 you are using the following

            $dateFormat = $value->get('dateFormat')
                ?? config('enso.config.dateFormat');
    
    • If $value->get('dateFormat') is undefined (e.g. for number values) it uses the date format from config
    • On line 128 and 150 you are checking if $dateFormat is set and if yes, you are treating the value as date which leads to the following exception:
    Screenshot 2019-07-05 13 12 14
  • 10

    RecordsInfo.vue producing error

    This is a bug.

    Prerequisites

    • [ ✅ ] Are you running the latest version?
    • [ ✅ ] Are you reporting to the correct repository?
    • [ ✅ ] Did you check the documentation?
    • [ ✅ ] Did you perform a cursory search?

    Description

    RecordsInfo.vue is throwing an error which seems to be coming from the computed properties (see screenshot below of error), all computed properties are showing (error during evaluation). The error goes away if I comment out the contents of the chunkInfo() computed property, however the other computed properties still show (error during evaluation).

    screen shot 2018-08-06 at 12 31 14

    It seems to be related to the this.i18n() function, when I change the chunkInfo() computed property to the following, it produces no error and shows the string on page.

            chunkInfo() {
                return 'From' + this.startInfo + ' ' + 'To ' + this.start + this.body.data.length;
            }
    

    Steps to Reproduce

    Installed into a Laravel project standalone without the rest of Enso, followed the documentation for an independant installation, all listed dependencies are installed.

    The error only happens when data is in the table.

    Expected behavior

    A string like shown in the example From 1 to 10 of 100000 entries (filtered from 100000 total records)

    Actual behavior

    No string generated at all, error in console shown above.

  • 11

    Table pagination fails when multi-select filters are applied

    This is a bug.

    Prerequisites

    • [x] Are you running the latest version?
    • [?] Are you reporting to the correct repository?
    • [x] Did you check the documentation?
    • [x] Did you perform a cursory search?

    Description

    When dealing with multiple selection filters, I noticed that pagination is not working when selecting as many options as it needs to exceed the number of entries per page.

    image

    Steps to Reproduce

    1. Define a "<select-filter multiple ... " for one existing table
    2. Link a source (options) and a v-model.
    3. Make sure table has more entries then the result per page table setting.
    4. Select all possible options from filter.

    Expected behavior

    See all results as if filter was not applied with correct number of pages.

    Actual behavior

    Just first page is visible.

  • 12

    Table responsiveness not working well when columns are unhidden.

    This is a bug.

    Prerequisites

    • [4.7.1/4.8.0] Are you running the latest version?
    • [x] Are you reporting to the correct repository?
    • [x] Did you check the documentation?
    • [x] Did you perform a cursory search?

    Description

    Steps to Reproduce

    1. Choose a table were you have too many columns and some of them are hidden by default (showing the arrow ">" / hidden-control in the first column which can be expanded to show the rest of the columns). It works best if you have a table where if you chose all columns it will not fit in the screen. (or to use your demo side, look at https://www.laravel-enso.com/administration/users/ with a lower resolution (640x480). This can be scaled if there are more columns, the resolution can be higher.
    2. If you start making other columns not visible (from the Visibility table control) the remaining columns are being set more and more apart without returning the hidden ones (under the hidden-control - ">") at all, making the table look weird ( until it is reset and is back to initial visible/not visible and/or hidden/not hidden columns OR window is resized even slightly). The ">" hidden-control disappears only if you remove the hidden columns at the end, but even if you have enough space, when you select the columns at the end, instead of adding them as visible columns, they are added as hidden.

    image

    If you set in table JSON "responsive= false", there is no scroll bar to let the user navigate to the end of the table.

    image

    When debugging, we've noticed that in ResponsiveTable.js (from enso-ui/tables), the condition this.shouldUnhide() in fit() method will always be false because the values compared in wasChanged() are set as being the one and the same in a previous step, in updateWidth(), because there is no window resizing involved to force a difference in the widths compared.

    Expected behavior

    When columns are being unchecked from Visibility table control, have the hidden ones appear into view. If 'responsive = false', a scroll bar should appear to allow the user to navigate to the end of the table.

    Actual behavior

    Columns visible in the main table view are removed from the table, but the ones pushed under the hidden-control (collapsible /expandable ">") are not returned into the main table view, ending up having one column visible, and the rest hidden, although there is room left for all to fit:

    image