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

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