Easybasejs-visual NPM

About The Project

Built With

Getting Started

Browser compatible library for EasyBase visual elements. Currently supports table integration with DataTables.net

Installation

Browser:

<head>
    ...
    <script src="https://cdn.jsdelivr.net/gh/easybase/easybasejs-visual@1.0.8/dist/bundle.js"></script>
    ...
</head>

Usage

EasyBase.table(integrationID, nodeID[, authentication, datatableOptions, customQuery, columnOptions])

integrationID: string:

EasyBase integration ID. Can be found by expanding the integration menu. This id is automatically generated.

nodeID: string:

HTML element id to place the table. E.g. \\.

authentication: string (optional):

Custom authentication string. Can be set in integration menu. If it is set, it is required to access integration. This acts as an extra layer of security and extensibility.

datatableOptions: Object (optional):

Custom options for dataTables.net carousel. Options can be found at https://datatables.net/reference/option/. This element is highly configurable and can be tailored to your needs.

Example:

const datatableOptions = {
    drawCallback: (settings) => console.log("Draw event occured"),
    autoWidth: false
}

customQuery: Object (optional):

This object can be set to overwrite the query values as set in the integration menu. If your query is setup to find records where 'age' >= 0, passing in { age: 50 } will query where 'age' >= 50.

columnOptions: Object (optional):

This object overwrites column properites as defined at https://datatables.net/reference/option/columns. Key is column name and values is an object with your configurations.

Example:

const columnOptions = {
  "amazon link" : {
    render: (data) => { return '<a href="' + data + '">Click Me!</a>' },
    width: "200px"
  }
}

Working Example:

<html>
  
<head>
  <script src="https://cdn.jsdelivr.net/gh/easybase/easybasejs-visual@1.0.8/dist/bundle.js"></script>
</head>
  
<body>
  <h1>Hello, World!</h1>
  <table id="easybase_table"></table>
  
  <script>
    const columnOptions = {
      "amazon link" : {
        render: (data) => { return '<a href="' + data + '">Click Me!</a>' },
        width: "200px"
      }
    };

    EasyBase.table("3ZL0JNhDVkuCf-c5", "easybase_table", null, {}, {}, columnOptions);
  </script>
</body>
  
</html>

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

Fork the Project
Create your Feature Branch (git checkout -b feature/EasybaseFeature)
Commit your Changes (git commit -m 'feature')
Push to the Branch (git push origin feature/EasybaseFeature)
Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Your Name - @easybase_io - hello@easybase.io

Project Link: https://github.com/easybase/easybasejs-visual

@glidejs/glide axios datatables.net datatables.net-bs4 dt-colresize jquery

1.0.4

4 years ago

easybasejs-visual v1.0.4

Table of Contents