Skip to content

stencil web component table that fetch data remotely

License

Notifications You must be signed in to change notification settings

aqidd/remote-table

Folders and files

NameName
Last commit message
Last commit date
Feb 18, 2020
Mar 15, 2020
Feb 16, 2020
Feb 16, 2020
Feb 16, 2020
Feb 16, 2020
Aug 1, 2020
Apr 30, 2020
Jun 5, 2020
Mar 15, 2020
Feb 18, 2020
Feb 16, 2020

Repository files navigation

Built With Stencil

Remote Table

This is a web component built using stencil that tries to dynamically load values from api returning JSON Array

remote table demo

What it does

Given url returning JSON Array, it will load and display your table, adding local search and pagination.

Just include:

<remote-table remote-url='https://jsonplaceholder.typicode.com/todos'
        table-title="Json Typicode Table" footer-text="remote-table 0.1"></remote-table>

Gotcha

You need to add JQuery and DataTable manually

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>

How to use :

  1. Clone the repository
  2. Run npm run build to build component or npm run start to start local dev
  3. Run npm run storybook to see the documentation with live example

To-Do:

  • Remove JQuery dependency ( use GridJS.io )
  • Add option for search & paginate url