jb-grid

currently this component only available in react in full mode and web-component is only support parts of the data grid like pagination and Row, Cell.

Using With JS Frameworks

Pagination

for pagination we use jb-pagination web-component

jb-pagination API

| name | type | description | | --- | --- | --- | | pageIndex | property | Current page index. | | min | property | Minimum page index. | | max | property | Maximum page index. |

<jb-pagination />

jb-pagination have some config into it here is how to config it:

import `jb-pagination`;
//change current page index
document.querySelector(`jb-pagination`).pageIndex = 5;
//max page number default is infinite
document.querySelector(`jb-pagination`).max = 10;
//min page number default is 1
document.querySelector(`jb-pagination`).min = 0;

For the standalone pagination API and CSS variables, see jb-pagination README.

jb-pagination CSS variables

| CSS variable name | description | | --- | --- | | --jb-pagination-index-width | Width of each page index button. |

Row & Cells

jb-row is a row web-component that imply a grid template based on given config to below cells. it also accept expand row that you can open and close it.

here is a code overview:

<jb-row>
  <jb-cell name="id">123<jb-cell>
  <jb-cell name="name">Joe<jb-cell>
  <jb-cell name="age">10<jb-cell>
  <jb-cell name="operation"><jb-expand-toggle><button>toggle</button></jb-expand-toggle><jb-cell>
  <div slot="expand">expand window content</div>
</jb-row>

Set Column Size

to set column size of the row you can pass a config that tell each column size. remember size is optional(default is 1fr) but name is mandatory.

document.querySelector(""jb-row).rowTemplate = [
  {name:"id",size:"1fr"},
  {name:"name",size:"400px"},
  {name:"age",size:200},
  {name:"operation",size:20%},
]

expand row

each row can contain a expand panel that open by user choice to show more data about that row. you must set slot="expand"in a div to make it as a expand div and set isOpen of row to open and close it or use jb-expand-toggle to do it automatically for you.

<jb-row>
  <jb-cell name="id">123<jb-cell>
  <jb-cell name="operation"><jb-expand-toggle><button>toggle</button></jb-expand-toggle><jb-cell>
  <div slot="expand">expand window content</div>
</jb-row>

<jb-expand-toggle>has a arrow icon designed to be put in first cell by default but you can customize it by passing children to it as you wish if you want to close and open by js you can use js mode:

//to open it
document.querySelector(`jb-row`).isOpen = true;
// to close it
document.querySelector(`jb-row`).isOpen = false;

Ellipses Cell

if your cell content is a long text need to get ellipses on overflow add ellipsis attribute to the jb-cell and ellipsis="max line" for multiline

<jb-cell ellipsis>Put Long Text Here</jb-cell>
<!-- Limited Browser Support for Multiline -->
<jb-cell ellipsis="3">Put Long Text Here</jb-cell>