stencil-datatable-component

v1.0.2

Published

3 years ago

SkyboxCheckout Stencil Datatable Component

Downloads

0High
0Medium
0Low

skyboxcheckout

datatable skyboxcheckout

Skybox Datatable Stencil Component

This is a component built using Stencil. Has a responsive design will automatically adjust the visibility of columns in the table so the the layout of information is nicely presented, regardless of screen size. The generated by Stencil is a standard web component, this can be used in any type of application, use JavaScript framework or not.

Getting Started

To start clone this repo to a new directory:

git clone [email protected]:skylogistics/skbx-datatable-component.git
cd my-component
git remote rm origin

and run:

npm install
npm start
npm start --es5

To build the component for production, run:

npm run build
npm run build --es5

Using this component

Script tag

You can:

Put a script tag similar to this <script src='https://www.npmjs.com/package/@skyboxcheckout/[email protected]/dist/stencil-datatable-component.js'></script> in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc

Node Modules

Run npm i @skyboxcheckout/stencil-datatable-component --save
Put a script tag similar to this <script src='node_modules/stencil-datatable-component/dist/stencil-datatable-component.js'></script> in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc

In a stencil app

Run npm install @skyboxcheckout/stencil-datatable-component --save
Add an import to the npm packages import stencil-datatable-component;
Then you can use the element anywhere in your template, JSX, html etc

Integration into a project without a framework

Download the stencil-datatable-component dependency as zip
Copy the dist folder in the path of the project that will use it
Import script similar to this <script src='./dist/stencil-datatable-component.js'></script> in the head of your index.html
Then you can use the element anywhere in your template

<html>
  <head> 
    <script src='./dist/stencil-datatable-component.js'></script>
  </head>
  <body>
    <div>
      <stencil-datatable-component />
    </div>

    <script>
      var myComponent = document.querySelector('stencil-datatable-component');

      myComponent.addEventListener("clickedCallback", function(a) {
        console.log(a.detail);
      });
    </script>
  </body>
</html>

Integration into a project with ReactJS

Run npm install @skyboxcheckout/stencil-datatable-component --save
Add an import to the npm packages import stencil-datatable-component;. To include the component library in the React project you must edit the index.js file of your React project to add the import and call to defineCustomElements (window). The file would look like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
 
import { defineCustomElements } from 'stencil-datatable-component/dist/loader';
 
ReactDOM.render(<App />, document.getElementById('root'));
 
defineCustomElements(window);

Then you must modify the App.js file to use our stencil-datatable-component

import ReactDOM from 'react-dom';
import Greeting from './Greeting';
import Clock from './Clock';
 
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.clickedCallback = this.clickedCallback.bind(this);
  }
 
  clickedCallback(e) {
    this.setState({
      value: e.detail
    });
  }
 
  componentDidMount() {
    this.refs['stencildatatable'].addEventListener('clickedCallback', this.clickedCallback);
  }
 
  render() {
    return (
      <div className="App">
        <stencil-datatable-component ref="stencildatatable" />
      </div>
   );
  }
}
 
export default App;

Then you can use the element anywhere in your template, JSX, html etc

Integration into a project with Angular

Run npm install @skyboxcheckout/stencil-datatable-component --save
Add an import to the npm packages import stencil-datatable-component;
Now we edit the angular.json file to include our library in the assets section and it can be accessible from the index.html.

"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
    "src/favicon.ico",
    "src/assets",
    { "glob": "**/*", "input": "./node_modules/stencil-datatable-component", "output": "/stencil-datatable-component/" }
],
"styles": [
     "src/styles.css"
],

Edit the index.html file to add the reference to our "head" library:

<script src="stencil-datatable-component/dist/stencil-datatable-component.js"></script>

In this way we can use our library both inside and outside the scope of Angular. But if we want to use it within the scope of Angular, we have to tell the framwork that we are using labels that he does not know and that, please, admit it and show no errors. To do this within the AppModule of the application we add the following schema:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Now we can edit the app.component.html file to add our color-picker which can be treated as an Angular component more where the inputs are binded with [] and the events are handled with ().

  <stencil-datatable-component (clickedCallback)="handleClickedCallback($event)"></stencil-datatable-component>

It is essential that the information is passed with $ event and in the detail of that object travels what is emitted from the StencilJS component.

Properties

| Property | Attribute | Description | Type | Default | | ------------- | ------------- | ----------- | -------- | ----------- | | data | data | | any | undefined | | headers | headers | | any | undefined | | maxheight | maxheight | | string | undefined | | maxrowspage | maxrowspage | | any | undefined | | paging | paging | | any | undefined | | searching | searching | | any | undefined |

Events

| Event | Description | Type | | ----------------- | ----------- | ------------------ | | clickedCallback | | CustomEvent<any> |

Show more information about proeprties in https://bitbucket.org/skylogistics/skbx-datatable-component/src/master/CHANGELOG.md