Git Product home page Git Product logo

svelte-datatable's Introduction

svelte datatable

This project was created by the Svelte REPL.

Data Table component was converted to Svelte from MicroDroid/vue-materialize-datatable project.

Paginate component was converted to Svelte from https://github.com/lokyoung/vuejs-paginate project.

See demo here at Heroku(it's slow to up and may not work if free time runs out for month.)

Features

  • Sorting, with numerical sorting
  • Pagination - Client & Server Side
  • Fuzzy searching
  • Excel export
  • Printing
  • Custom topbar buttons
  • Flexible data-from-row extractor
  • Follows the Material Design spec
  • Limited support for IE 11(need Object.assign polyfill)

Requirements

Get started

You will need to have Node.js installed.

Install the dependencies...

cd /path/to/this/directory
npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

Deploying to the web

With now

Install now if you haven't already:

npm install -g now

Then, from within your project folder:

now

As an alternative, use the Now desktop client and simply drag the unzipped project folder to the taskbar icon.

With surge

Install surge if you haven't already:

npm install -g surge

Then, from within your project folder:

npm run build
surge public

svelte-datatable's People

Contributors

dependabot[bot] avatar dydx-git avatar kiho avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

svelte-datatable's Issues

New to Svelte

This isn't specifically related to this repo but I am new to Svelte and am struggling to figure out how to incorporate this in my basic Svelte app that is already set up. I did an NPM -i svelte-datatable -D and have the code now in my node folder but cannot figure out what to include and where and then how to use this code. I wonder if you could give a basic example of how to incorporate this component into a pre-existing svelte app.

The Heroku demo appears not to work

I understand the demo is supposed to be slow, but clicking the Edit button beside any row doesn't do anything, ever. I've waited 10+ minutes (on two different days) - nothing happens. The only interactive functionality to that table appears to be the sorting and pagination - which is fine, but the prominent presence of the Edit buttons suggests something should happen when clicked.

While on the subject, would love to see code examples for adding a new row to the datatable, and for using the datatable for user data entry.

Tx

Install Dependencies Svelte rollUp project

I am trying to use the component. After doing

npm i svelte-datatable -D

The component is installed, but not the dependencies like fuse.js. Is there a way to install the dependencies also?

Thanks

Implementing

Do we have any documentation regarding the implementation of this?

<DataTable title="Test Data" getList={rowdata} rows={rowdata} columns={columndata}/>` Unable to retrieve json data.

Can't add function to `columndata` `Edit` button

Where you define columndata, there's a button render function that returns html markup in a string.
This one:

{
      label: "Action",
      field: function(data) {
        return (
          '<a href="#customers/' +
          data.id +
          '" class="waves-effect waves-light btn nopadding" onclick="console.log((' +
          data.id +
          ')">Edit</a>'
        );
      },
      numeric: false,
      html: true
    }

If I call any function defined in the script tag, it says it's undefined. Please refer to this:
https://stackoverflow.com/questions/56957074/how-can-i-call-a-function-with-onclick-with-my-inline-buttons-with-svelte

How would you suggest one can achieve this?

Thanks for your help!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.