Inertia.js Tables for Laravel Query Builder

Home Page: https://protone.media/en/blog/introducing-inertiajs-tables-a-datatables-like-package-for-laravel-query-builder

License: MIT License

JavaScript 3.33% Vue 24.19% PHP 72.21% CSS 0.03% Blade 0.24%

laravel vue vuejs inertiajs inertia eloquent eloquent-models php tailwindcss vue3

inertiajs-tables-laravel-query-builder's Issues

Checkbox state looks weird enabled/disabled (visible/hidden)

So the first one is disabled but why is the switch for the others also on the left?

And as mentioned here: #14 (comment)
If the id-column is set to enabled=false (which I think should be "hidden=true" or "visible=false") I'm not able to display the id column. All other columns can be hidden and displayed again except for the ones hidden (disabled) by default through the new third parameter.

Suggestions: Add a "Remove Filter" button that removes all applied filters.

#1 - Sorry for the English, I'm not very familiar with the language.

#2 - During my use, I needed to implement a button that removes all filters applied to the table. So I thought it would be a good idea to suggest this implementation.

#3 - I would like to help in some way, but I'm not that good with VueJs. But if you want, I can try to help in some way.

Issue with addColumn method (default false)

When i use addColumn with default = false, initial table setup is correct, but, if i try to toggle up that column, button stops working without displaying the new column.
If i set default = true the button works as usual.
Nobody else encountered this problem?

Suggestion for php8.0

Hey @pascalbaljet,

Just a suggestion for anyone looking to clean up a simple datatable:

$languages = QueryBuilder::for(Language::class)
    ->defaultSort('id')
    ->allowedSorts($this->datatableColumns)
    ->paginate()
    ->withQueryString();

$callback = fn (InertiaTable $table) =>
    $table->addSearchRows($this->datatableSearchRows)
         ->addColumns($this->datatableColumns);

return Inertia::render(
    'Languages/Index',
    [
         'languages' => $languages,
    ]
)->table($callback);

Conflicting peer dependency: @vue/[email protected]

Trying to install @protonemedia/inertiajs-tables-laravel-query-builder in a Vue3 project results in peer dependency conflict. I was able to install by using the --force option. Below is the full NPM log.

# npm resolution error report

2021-04-12T00:26:11.826Z


Could not resolve dependency:
@protonemedia/inertiajs-tables-laravel-query-builder@"*" from the root project

Conflicting peer dependency: @vue/[email protected]
node_modules/@vue/composition-api
  peerOptional @vue/composition-api@"^1.0.0-rc.6" from @protonemedia/[email protected]
  node_modules/@protonemedia/inertiajs-tables-laravel-query-builder
    @protonemedia/inertiajs-tables-laravel-query-builder@"*" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": null,
  "currentEdge": null,
  "edge": {
    "type": "prod",
    "name": "@protonemedia/inertiajs-tables-laravel-query-builder",
    "spec": "*",
    "error": "MISSING",
    "from": {
      "location": ""
    }
  },
  "peerConflict": {
    "name": "@vue/composition-api",
    "version": "1.0.0-rc.6",
    "whileInstalling": {
      "path": ""
    },
    "location": "node_modules/@vue/composition-api",
    "dependents": [
      {
        "type": "peerOptional",
        "name": "@vue/composition-api",
        "spec": "^1.0.0-rc.6",
        "from": {
          "name": "@protonemedia/inertiajs-tables-laravel-query-builder",
          "version": "1.1.0",
          "whileInstalling": {
            "path": ""
          },
          "location": "node_modules/@protonemedia/inertiajs-tables-laravel-query-builder",
          "dependents": [
            {
              "type": "prod",
              "name": "@protonemedia/inertiajs-tables-laravel-query-builder",
              "spec": "*",
              "from": {
                "location": ""
              }
            }
          ]
        }
      }
    ]
  },
  "strictPeerDeps": false,
  "force": false
}

QueryBuilder error on search

Hey there,

Users are displayed properly in the table, but I'm getting the following error when I type something in the search field:
Argument 1 passed to Spatie\QueryBuilder\QueryBuilder::Spatie\QueryBuilder\Concerns\{closure}() must be of the type string, array given

Using the example controller:

            ->defaultSort('name')
            ->allowedSorts(['name', 'email'])
            ->allowedFilters(['name', 'email', $globalSearch])
            ->paginate()
            ->withQueryString();

as well as the example page component with the table from the README.

Vue 3, Laravel Jetstream(Inertia).

Vuetify Datatable

Can you create for vuetify?

Or how to use InteractsWithQueryBuilder with vuetify table?

Missing required prop: "queryBuilderProps"

[Vue warn]: Missing required prop: "queryBuilderProps"

found in

no way to preserveScroll

There is no way to set the "preserveScroll" property of $inertia.get() [queryBuilderData], each time i change a filter etc, the page scrolls to the top. preserveScroll should be default behavior.

this is resolved in PR #45 in the mean time i will use my own repo. Anyway awsome package!

Multiselect and Checkbox (multi value) filters

Will you add support for multi select or multiple values for filter?

Table Styling

Hi,
What is the best way to control styling.

For example, reducing font size, line padding and so on.

What about per column styling, for example left align, right align depending on controls?

Would be good if styling can be "passed" to the component.

Many thanks.

Cheers.

Date and date range filters

Is there any support for filters by date and date range?

Custom head/body v-show="show('colume')" does not work

Hi,

I just upgraded to 2.0 and everythink works fine except the v-show="show('colume')" on a custom head/body. Renamed showColumn to show as described.

[Vue warn]: Property "show" was accessed during render but is not defined on instance.
Uncaught (in promise) TypeError: _ctx.show is not a function

Any idea or example?

Mixed content when changing page in table

In my prod server i'm getting this error "Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ''. This request has been blocked; the content must be served over HTTPS."

Probably not a bug, but can someone help me with this?

[2.x] Production build not working in Vite projects

When using the library in a Laravel project that uses Vite, you'll find this error in the browser console: currentRenderingInstance is null. The test suite, a regular Laravel app with Laravel Mix, uses Webpack and works fine.

From searching the web, it seems the library is using the wrong Vue instance (at least not the one from the app). On the other hand, it looks like the Vite config is set up correctly.

inertiajs-tables-laravel-query-builder/vite.config.js

Line 20 in e8c38d1

"vue"

From inspecting the build manually, I can see Vue is not included in the library, which is good.

Any help would be appreciated!

Can I able to add query the table based on groupBy

I need to create a table based on groupby, count it based on the value and show it in the table

` $globalSearch = AllowedFilter::callback('global', function ($query, $value) {
$query->where(function ($query) use ($value) {
$query->orWhere('term', 'LIKE', "%{$value}%");
});
});

    $activities = QueryBuilder::for(Activity::select('term', DB::raw('count(*) as total'))
        ->groupBy('term'))
        ->defaultSort('term')
        ->allowedSorts(['term'])
        ->allowedFilters(['term', $globalSearch])
        ->paginate()
        ->withQueryString();

    return Inertia::render('Dashboard', [
        'activities' => $activities,
    ])->table(function (InertiaTable $table) {
        $table->withGlobalSearch()
        ->defaultSort('term')
        ->column(key: 'term', searchable: true, sortable: true, canBeHidden: false);
    });`

Request to add an option to "addColumn" to disable as default

Hi,
Wondering if it would be possible to add the option to add columns, but add them disabled by default.

Would be a bonus if the state can be saved, so that when returning to the table, that the selected columns visibility is maintained.

Might be nice to extend to saving sort order etc.

    /**
     * Add a column to the query builder.
     *
     * @param string $key
     * @param string $label
     * @param bool $enabled
     * @return self
     */
    public function addColumn(string $key, string $label, bool enabled = true): self
    {
        $this->columns->put($key, [
            'key'     => $key,
            'label'   => $label,
            'enabled' => $enabled,
        ]);

        return $this;
    }

include relationships in queries

I think this might be beyond the scope of this project but I hope you don't mind me asking:

Would there be a way to dig down into relations for the table data via the allowedIncludes() method of QueryBuilder?

E.g. if I have a model with a belongsTo relation to User, I want to be able to display the user's name, not only his id.

So, a query like

QueryBuilder::for(SomeModel::class)
            ->allowedIncludes('user')
            ->defaultSort('id')
            ->allowedSorts(['id', 'user_id'])
            ->allowedFilters(['user_id', $globalSearch])
            ->paginate()
            ->withQueryString();

and probably some setting to have that include called by default?

Best regards,
Martin

Error when importing javascript modules (ViteJs?)

Using Laravel 9 (jetstream), Inertia.js, Vue3, ViteJs.

I used this package before, and got it working. The main difference now is that i use ViteJS. Not sure if this is related.

I get the following error when importing this (nice) package:

Uncaught (in promise) SyntaxError: The requested module '/node_modules/qs/lib/index.js?v=57eb2887' does not provide an export named 'default' (at InteractsWithQueryBuilder.vue:2:8)

I`m using the example from de documentation:

<script>
import { InteractsWithQueryBuilder, Tailwind2 } from '@protonemedia/inertiajs-tables-laravel-query-builder';

export default {
  mixins: [InteractsWithQueryBuilder],

  components: {
    Table: Tailwind2.Table
  },

  props: {
    users: Object
  }
};
</script>

Am i doing something wrong or is this a bug?

Add support for localization

Right now there's no way to customize messages like "No results found", "Previous", "Next" , "X to Y of N results", "Remove Search", etc...

Filter select is not working

I did not know if it is an issue or just a edge case or a bad implementation of mine.

I can not make work the filter select:

Backend code:

    public function index(): \Inertia\Response
    {
        $globalSearch = AllowedFilter::callback('global', function ($query, $value) {
            $query->where(function ($query) use ($value) {
                $query->where('name', 'LIKE', "%{$value}%")->orWhere('email', 'LIKE', "%{$value}%");
            });
        });

        $users = QueryBuilder::for(User::class)
            ->defaultSort('name')
            ->allowedSorts(['name', 'email', 'id'])
            ->allowedFilters(['name', 'email', 'id', $globalSearch])
            ->paginate()
            ->withQueryString();

        return Inertia::render('Users', [
            'users' => $users,
        ])->table(function (InertiaTable $table) {
            $table->addSearchRows([
                'name' => 'Name',
                'email' => 'Email address',
            ])->addFilter('name', 'Name', [
                'Ariel' => 'ariel',
            ])->addColumns([
                'email' => 'Email address',
                'id' => 'ID',
            ]);
        });
    }

Vue component

<template>
    <breeze-authenticated-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Users
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

                <Table
                    :filters="queryBuilderProps.filters"
                    :search="queryBuilderProps.search"
                    :columns="queryBuilderProps.columns"
                    :on-update="setQueryBuilder"
                    :meta="users"
                >
                    <template #head>
                        <tr>
                            <th @click.prevent="sortBy('name')">Name</th>
                            <th v-show="showColumn('email')" @click.prevent="sortBy('email')">Email</th>
                            <th v-show="showColumn('id')" @click.prevent="sortBy('id')">ID</th>
                        </tr>
                    </template>

                    <template #body>
                        <tr v-for="user in users.data" :key="user.id">
                            <td>{{ user.name }}</td>
                            <td v-show="showColumn('email')">{{ user.email }}</td>
                            <td v-show="showColumn('id')">{{ user.id }}</td>
                        </tr>
                    </template>
                </Table>

            </div>
        </div>

    </breeze-authenticated-layout>
</template>

<script>
    import BreezeAuthenticatedLayout from '@/Layouts/Authenticated'
    import { InteractsWithQueryBuilder, Tailwind2 } from '@protonemedia/inertiajs-tables-laravel-query-builder';

    export default {
        components: {
            BreezeAuthenticatedLayout,
            Table: Tailwind2.Table,
        },

        mixins: [InteractsWithQueryBuilder],

        props: {
            auth: Object,
            errors: Object,
            users: Object | Array,
        },
    }
</script>

I am using Breeze, but maybe there is something that I miss.

How to use it with react ?

Hello ,
is there a way to use this package for react js and interia .

Unable to render the table component in the vue frontend

This package seems to do wonders, but I am unable to render the page as soon as I import the component. I am on Laravel 8, Inertia JS and Vue 3. Please help me if incase I am doing it incorrectly. Thank you for your time.

Here is the console error which is getting thrown.

Uncaught (in promise) TypeError: this.$once is not a function
at Proxy.mounted (app.js:66560)
at callWithErrorHandling (app.js:24930)
at callWithAsyncErrorHandling (app.js:24939)
at Array.hook.__weh.hook.__weh (app.js:26707)
at flushPostFlushCbs (app.js:25128)
at flushJobs (app.js:25164)

Here is my index method in the controller through which I am rendering the component.

public function index()
{
    $users = QueryBuilder::for(User::class)
        ->allowedFields(['id', 'name', 'email', 'role_id', 'created_at'])
        ->allowedSorts(['id', 'name', 'email', 'role_id', 'created_at'])
        ->allowedFilters(['name', 'email', 'role_id'])
        ->paginate()
        ->withQueryString();

    return Inertia::render('Backend/Management/AudienceManagement/Users/Data', [
        'users' => $users
    ])->table(function (InertiaTable $table) {
        $table->addSearchRows([
            'name' => 'Name',
            'email' => 'Email Address'
        ])->addFilter('role_id', 'Role', [
            '1' => 'Administrator',
            '2' => 'Employee',
            '3' => 'Client',
        ])->addColumns([
            'id' => 'ID',
            'name' => 'Name',
            'email' => 'Email',
            'role_id' => 'Role',
            'created_at' => 'Date',
        ])->disableGlobalSearch();
    });
}

Here is the table component imported in the frontend.

<Table :filters="queryBuilderProps.filters" :search="queryBuilderProps.search" :columns="queryBuilderProps.columns" :on-update="setQueryBuilder" :meta="users">
    <template #head>
        <tr>
            <th @click.prevent="sortBy('id')">ID</th>
            <th @click.prevent="sortBy('name')">Name</th>
            <th v-show="showColumn('email')" @click.prevent="sortBy('email')">Email</th>
            <th v-show="showColumn('role_id')" @click.prevent="sortBy('role_id')">Role</th>
            <th v-show="showColumn('created_at')" @click.prevent="sortBy('created_at')">Date</th>
        </tr>
    </template>

    <template #body>
        <tr v-for="user in users.data" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.name }}</td>
            <th v-show="showColumn('email')">{{ user.email }}</th>
            <th v-show="showColumn('role_id')">{{ user.role_id }}</th>
            <th v-show="showColumn('created_at')">{{ user.created_at }}</th>
        </tr>
    </template>
</Table>

<script>
    import BreezeAuthenticatedLayout from '@/Layouts/Authenticated';
    import {
        InteractsWithQueryBuilder,
        Tailwind2
    } from '@protonemedia/inertiajs-tables-laravel-query-builder';

    export default {
        mixins: [InteractsWithQueryBuilder],

        components: {
            Table: Tailwind2.Table,
            BreezeAuthenticatedLayout
        },

        props: {
            users: Object
        }
    }
</script>

Is there any way to grab the filtered values and export them to PDF or XLS?

I am needing to export the records that are filtered in the table in XLS or PDF Format using Laravel and VueJS.

no perPage dinamic

There is dont have perPage property when i add requsest perPage=20, each time i change a filter etc, the page will be resset pePage query be default behavior.

How to change filter

How to change filter '-' to 'All'?

[Feature Request] TableGlobalSearch Placeholder String

can we have the same translation method for the placeholder "Search..." in TableGlobalSearch Component?

regards

TypeScript support

Hey,

Currently I can't import { Table } from '@protonemedia/inertiajs-tables-laravel-query-builder' without using @ts-ignore, because the package provides no typings.

Would be nice if the package provided TypeScript typings, so Table attributes and all slots would have autocompletion support.

Column Sort Icons

Hi,
Wondering if you have considered adding column sort direction icon (svg)?

Or did I miss it?

Many thanks.

Feature Enhancement - Access row index on cell slot

Hi @pascalbaljet , I have some issue when accessing row index on cell slot. I suggest you to add slot props (index). My reason is I want to process the index in table.

Please refer to this code:
https://github.com/protonemedia/inertiajs-tables-laravel-query-builder/blob/main/js/Components/Table.vue

please check line code 159, can you add this code :index="key" ?

<slot
      :name="`cell(${column.key})`"
      :item="item"
      :index="key"
    >
      {{ item[column.key] }}
</slot>

Inertia-link not working in pagination

The fix is to import

import {Link} from '@inertiajs/inertia-vue3'; in the Pagination.vue and use link instead of the inertia-link

Auto generation of table columns

Great library, thank you!

Am I missing something or is there a way of auto generating the columns and headers based on the controller's output? The information is all in the AJAX response. This is to avoid having to statically add the template for header and body.

Many thanks,

James

Vue component doesn't work when route has parameters

The Vue component throws an error when used on a route with parameters. For example, say you were using the table on the route example.com/users/1/tasks. When you update any of the filters or search fields and it updates the route with the new query string, it would throw the error Error: Ziggy error: 'user' parameter is required for route 'tasks'.

Add an input type text field in the filter system

Hello I would like to know if your package gives the possibility to add an input field in the filter system I have read the documentation but nothing.

Vue 3: The `>>>` combinators have been deprecated

When compiling the vue components, we're getting deprecation warnings for Vue 3.

This seems to stem from these places:

Can we update this to use the :deep() selector? Or would this be an issue for the Vue 2 build?

Inertia.replace is deprecated

Hi, thanks for this awesome package!

I'm noticing console warning from inertia about the replace method being deprecated.

From what I can see this comes from this line.

Conflicting peer dependency

Trying to install @protonemedia/inertiajs-tables-laravel-query-builder in a Vue3 project results in peer dependency conflict.
Below is the full NPM log.

# npm resolution error report

2022-06-27T09:51:53.078Z

While resolving: undefined@undefined
Found: [email protected]
node_modules/vue
  peer vue@"^3.0.0" from @inertiajs/[email protected]
  node_modules/@inertiajs/inertia-vue3
    @inertiajs/inertia-vue3@"^0.6.0" from the root project
  peer vue@"3.2.37" from @vue/[email protected]
  node_modules/@vue/server-renderer
    @vue/server-renderer@"3.2.37" from [email protected]

Could not resolve dependency:
@protonemedia/inertiajs-tables-laravel-query-builder@"*" from the root project

Conflicting peer dependency: [email protected]
node_modules/vue
  peer vue@">= 2.5 < 3" from @vue/[email protected]
  node_modules/@vue/composition-api
    peerOptional @vue/composition-api@"^1.0.0-rc.6" from @protonemedia/[email protected]
    node_modules/@protonemedia/inertiajs-tables-laravel-query-builder
      @protonemedia/inertiajs-tables-laravel-query-builder@"*" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "edge": {
    "type": "prod",
    "name": "@protonemedia/inertiajs-tables-laravel-query-builder",
    "spec": "*",
    "error": "MISSING",
    "from": {
      "location": ""
    }
  },
  "dep": {
    "name": "@protonemedia/inertiajs-tables-laravel-query-builder",
    "version": "1.3.4",
    "whileInstalling": {
      "path": ""
    },
    "location": "node_modules/@protonemedia/inertiajs-tables-laravel-query-builder",
    "isWorkspace": false,
    "dependents": [
      {
        "type": "prod",
        "name": "@protonemedia/inertiajs-tables-laravel-query-builder",
        "spec": "*",
        "error": "MISSING",
        "from": {
          "location": ""
        }
      }
    ]
  },
  "current": null,
  "peerConflict": {
    "current": {
      "name": "vue",
      "version": "3.2.37",
      "location": "node_modules/vue",
      "isWorkspace": false,
      "dependents": [
        {
          "type": "peer",
          "name": "vue",
          "spec": "^3.0.0",
          "from": {
            "name": "@inertiajs/inertia-vue3",
            "version": "0.6.0",
            "location": "node_modules/@inertiajs/inertia-vue3",
            "isWorkspace": false,
            "dependents": [
              {
                "type": "prod",
                "name": "@inertiajs/inertia-vue3",
                "spec": "^0.6.0",
                "from": {
                  "location": ""
                }
              }
            ]
          }
        },
        {
          "type": "peer",
          "name": "vue",
          "spec": "3.2.37",
          "from": {
            "name": "@vue/server-renderer",
            "version": "3.2.37",
            "location": "node_modules/@vue/server-renderer",
            "isWorkspace": false,
            "dependents": [
              {
                "type": "prod",
                "name": "@vue/server-renderer",
                "spec": "3.2.37",
                "from": {
                  "name": "vue",
                  "version": "3.2.37"
                }
              }
            ]
          }
        }
      ]
    },
    "peer": {
      "name": "vue",
      "version": "2.6.14",
      "whileInstalling": {
        "path": ""
      },
      "location": "node_modules/vue",
      "isWorkspace": false,
      "dependents": [
        {
          "type": "peer",
          "name": "vue",
          "spec": ">= 2.5 < 3",
          "from": {
            "name": "@vue/composition-api",
            "version": "1.6.3",
            "whileInstalling": {
              "path": ""
            },
            "location": "node_modules/@vue/composition-api",
            "isWorkspace": false,
            "dependents": [
              {
                "type": "peerOptional",
                "name": "@vue/composition-api",
                "spec": "^1.0.0-rc.6",
                "from": {
                  "name": "@protonemedia/inertiajs-tables-laravel-query-builder",
                  "version": "1.3.4",
                  "whileInstalling": {
                    "path": ""
                  },
                  "location": "node_modules/@protonemedia/inertiajs-tables-laravel-query-builder",
                  "isWorkspace": false,
                  "dependents": [
                    {
                      "type": "prod",
                      "name": "@protonemedia/inertiajs-tables-laravel-query-builder",
                      "spec": "*",
                      "error": "MISSING",
                      "from": {
                        "location": ""
                      }
                    }
                  ]
                }
              }
            ]
          }
        }
      ]
    }
  },
  "strictPeerDeps": false,
  "force": false,
  "isMine": true
}

Missing required prop: "queryBuilderProps"

I followed the guide and did everything as indicated but I get this error in the console

Missing required prop: "queryBuilderProps"

Refactor Required for Inertia's Page Link Component

Hey! Thanks for the great package.

I have detected pagination links doesn't work well on my latest JetStream and Inertia env.

Inertia changed the Link component usage with [email protected] (ref: https://inertiajs.com/releases/inertia-vue-0.7.0-2021-07-13)

inertia-link usages should be refactored as Link, and the component should be imported on here https://github.com/protonemedia/inertiajs-tables-laravel-query-builder/blob/main/js/Tailwind2/Pagination.vue#L9

Usage of the links: https://inertiajs.com/links

I wanted to fix it with a PR but I could not create a new branch due to I don't have permission

Thanks!

Spaces get deleted when using the search filter

When using the search filter, if you have a space in your search string it gets deleted initially. If you hit space again slowly, it will stay. When another space is attempted, both spaces are removed. For me, this bug makes the filter unusable.

I believe it has something to do with the URL encoding of the search terms as you type.

Documentation for the TH cell component

This feature is missing in documentation #26

Can you guys add support to the attribute appending feature supported by spatie query builder ?

This is the documentation in the spatie website https://spatie.be/docs/laravel-query-builder/v3/features/appending-attributes
The goal is to make the Table component able to request custom attributes from the backend (for example fullname)

ButtonWithDropdown width must match content

You need to change this line
<div class="mt-2 w-64 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
to be
<div class="mt-2 container rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">

this will allow the dropdown to have labels wider than the 64 pixels width

remember=forget

Great package, thanks!!

Can anyone explain this line?

inertiajs-tables-laravel-query-builder/js/InteractsWithQueryBuilder.vue

Line 148 in 65e132e

query = "remember=forget";

Why is 'remember=forget' added to the query?

Style broken on production build

Hello,

Seems like there's an issue when building assets to production. Everything looks good when running mix in the development

But when assets are compiled to production, it seems broken

Mix also throws warning which might be related to this (Using vue3)

[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

Cannot use import statement outside a module

Is this package does not work with Inertia JS?

E:\Projects\dymlab>node public/js/ssr.js
Starting SSR server...
Server started.
E:\Projects\dymlab\node_modules\@protonemedia\inertiajs-tables-laravel-query-builder\js\index.js:1
import iwqb from './InteractsWithQueryBuilder.vue';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1054:16)
    at Module._compile (internal/modules/cjs/loader.js:1102:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.@protonemedia/inertiajs-tables-laravel-query-builder (E:\Projects\dymlab\public\js\ssr.js:13219:18)
    at __webpack_require__ (E:\Projects\dymlab\public\js\ssr.js:13287:41)
    at Object../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Dashboard.vue?vue&type=script&lang=js (E:\Projects\dymlab\public\js\ssr.js:1466:110)
ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
    at Module.default (E:\Projects\dymlab\public\js\ssr.js:11202:42)
    at E:\Projects\dymlab\node_modules\@inertiajs\inertia-vue3\dist\index.js:1:9011
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
    at Module.default (E:\Projects\dymlab\public\js\ssr.js:11202:42)
    at E:\Projects\dymlab\node_modules\@inertiajs\inertia-vue3\dist\index.js:1:9011
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

Is it possible to use this library 3.x? Only by creating a custom component?

Weird look for filters

When pay layout is small because there is only one item being displayed in the table, the related filters on the top left look weird by default. Maybe it's a responsive issues?

protonemedia / inertiajs-tables-laravel-query-builder Goto Github PK

inertiajs-tables-laravel-query-builder's Issues

Backend code:

Vue component

Recommend Projects

Recommend Topics

Recommend Org