is this usable WITHOUT NPM?

iansebryk commented 4 years ago

figured this would be a better place to ask you than on your Vue Forum post...

i often have to work within very narrow constraints for security purposes. consequently on some jobs, NPM, SASS are not available because we are only permitted to run locally linked libraries. nothing that can 'phone home'. not being familiar with NPM to the degree i'd like, i want to use your library, but don't know how to use it outside of an NPM-capable environment. is there a way to implement your wonderful tool locally sans NPM?

thanks for your patience.

uwla commented 4 years ago

Hello! Thanks for the question.

Currently this package is not usable without npm. The reason is that I don't know how to implement it yet. But on the next couple of days I will work on to figure out how make the package available through maybe a CDN or maybe just by downloading the file.

You're welcome If you have any other suggestion or question :)

iansebryk commented 4 years ago

@AndreSouzaAbreu that's fantastic!! wow! thank you! I wish my JS chops were good enough to offer some help. hats off to you sir! :D I'll keep my eyes peeled for your update, whenever it comes.

--

Ian Sebryk IT Specialist

Mar. 18, 2020 05:33:18 André Souza Abreu notifications@github.com:

Hello! Thanks for the question.

Currently this package is not usable without npm. The reason is that I don't know how to implement it yet. But on the next couple of days I will work on to figure out how make the package available through maybe a CDN or maybe just by downloading the file.

You're welcome If you any other suggestion :)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [https://github.com/AndreSouzaAbreu/vue-data-table/issues/1#issuecomment-600571493] , or unsubscribe [https://github.com/notifications/unsubscribe-auth/AAO2QFWENPSYBGIL7GIOR2LRICWP3ANCNFSM4LMWL2MA] . [https://github.com/notifications/beacon/AAO2QFVUVID7ZXWEPQKUIF3RICWP3A5CNFSM4LMWL2MKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEPF74ZI.gif]

uwla commented 4 years ago

Hello my friend!

I was able to figure out a work around for this :) !! Now you will be able use VueDataTable without npm!

I created a demo project on codesandbox where you can see how to implement it.

I'm also pasting the code here just in case the link doesn't work

The index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>VUE DATA TABLE</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <style>
      #app {
        padding: 32px;
        min-height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1 class="text-center">Users Dashboard</h1>
      <br />
      <hr />
      <br />
      <main>
        <data-table v-bind="options"></data-table>
      </main>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex"></script>
    <script src="https://unpkg.com/@andresouzaabreu/vue-data-table"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@andresouzaabreu/vue-data-table/dist/DataTable.css"
    />
    <script src="./users.js"></script>
    <script>
      var store = new Vuex.Store({
        state: {
          users
        }
      });

      installVueDataTable(Vue, store);

      var app = new Vue({
        el: "#app",
        store,

        created() {
          DataTableEventBus.$on("viewData", data =>
            console.log("showing  " + data.id, data)
          );
          DataTableEventBus.$on("editData", data =>
            console.log("editing data " + data.id, data)
          );
          DataTableEventBus.$on("deleteData", data =>
            console.log("deleting data " + data.id, data)
          );
        },

        computed: {
          options() {
            return {
              actionColumn: "multiple",
              data: this.$store.state.users,
              columns: [
                ...["name", "email", "job", "country"].map(key => ({ key })),
                {
                  key: "phone",
                  orderable: false,
                  searchable: false
                }
              ]
            };
          }
        }
      });
    </script>
  </body>
</html>

The users.js

var users = [
  /*an array with hundreds of objects*/
]

I hope that helps :)

Please, don't hesitate to contact. Best regards

uwla commented 4 years ago

@iansebryk , please, let me know if you succeed in implementing VueDataTable and if you have any further question

uwla commented 4 years ago

Hi @iansebryk ! I hope you are doing fine!

So, since you didn't reply I will assume that your issue was solved, but if you reply here that the issue persists then we can try out another solution.

If you have time please tell us if that worked and how was your experience :)

Thanks in advance

uwla / vue-data-table

is this usable WITHOUT NPM? #1