jb-grid

currently jb-grid web-component is a separated web-components related to the grid layout data table that you can combine them together to create your own grid data table.

Using With JS Frameworks

Other integrations: Angular · Vue · Nuxt · Svelte · SvelteKit · SolidJS · Lit · Next.js · Astro · Blazor · Server-rendered templates · WordPress · Alpine.js and HTMX

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.

Grid Layout and Body States

jb-grid-layout provides named slots for assembling a grid. Its default body layout supports these slots:

| Slot | Description | | --- | --- | | table-header | Header row shown above the scrollable content. | | body-content | Normal grid rows or other main content. | | body-error | Error view positioned over the body. | | body-loading | Loading view positioned above all other body views. |

Loading and error slot elements are hidden by default. Add the boolean show attribute to the root slotted element to display that state. Removing show hides it again without removing the element from the DOM.

<jb-grid-layout>
  <jb-table-header slot="table-header"></jb-table-header>
  <div slot="body-content" class="table-content-wrapper">
    <!-- grid rows -->
  </div>

  <div slot="body-error" show>
    Could not load the grid data.
  </div>

  <jb-grid-loading slot="body-loading"></jb-grid-loading>
</jb-grid-layout>

Toggle a state with JavaScript:

const loading = document.querySelector('[slot="body-loading"]');
loading.toggleAttribute("show", isLoading);

If loading and error both have show, loading appears above error. The React JBGrid component manages these attributes from its isLoading and isErrorOccurred props.

jb-pagination CSS variables

| CSS variable name | description | | --- | --- | | --jb-pagination-arrow-button-fill-color | Fill color of pagination arrow buttons. | | --jb-pagination-arrow-button-fill-color-disabled | Fill color of disabled pagination arrow buttons. | | --jb-pagination-index-width | Width of each page index button. | | --jb-pagination-page-index-color | Color of page index buttons. | | --jb-pagination-page-index-color-current | Color of the current page index button. |

jb-row CSS variables

| CSS variable name | description | | --- | --- | | --jb-row-bg-color | Row background color. | | --jb-row-bg-color-even | Even row background color. | | --jb-row-bg-color-even-tablet | Even row background color in tablet layout. | | --jb-row-border-radius | Row border radius in tablet layout. | | --jb-row-expand-border-color | Expand panel bottom border color. | | --jb-row-expand-padding-block | Expand panel block padding. | | --jb-row-expand-padding-inline | Expand panel inline padding. | | --jb-row-shadow-color | Row shadow color in tablet layout. |

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:"25rem"},
  {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

Cells clip horizontal overflow to stay inside their grid column. If long text should show an ellipsis, add the ellipsis attribute to jb-cell; use ellipsis="max line" for multiline truncation.

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

Table Header

jb-table-header is a grid header wrapper for jb-col-header cells. Set headerTemplate to the same column template shape used by jb-row.

<jb-table-header>
  <jb-col-header name="id">
    <span slot="title">ID</span>
  </jb-col-header>
  <jb-col-header name="name" sortable>
    <span slot="title">Name</span>
  </jb-col-header>
</jb-table-header>

import 'jb-grid';

document.querySelector('jb-table-header').headerTemplate = [
  { name: 'id', size: '5rem' },
  { name: 'name', size: '1fr' },
];

jb-table-header API

| name | type | description | | --- | --- | --- | | headerTemplate | property | Column template config for the header grid. |

jb-col-header API

| name | type | description | | --- | --- | --- | | name | attribute/property | Column name. It is used as the grid-area name. | | sortable | attribute/property | Enables click sorting for this column. | | sort | attribute/property | Current sort direction. Accepts asc, desc, or no value. | | sort | event | Fired when a sortable header is clicked. Event detail is { name, sort }. | | title | slot | Header caption content. |

document.querySelector('jb-col-header').addEventListener('sort', (event) => {
  console.log(event.detail.name, event.detail.sort);
});

Pagination Info

jb-pagination-info shows page-size selection and the current item range.

<jb-pagination-info></jb-pagination-info>

const paginationInfo = document.querySelector('jb-pagination-info');

paginationInfo.pageSize = 20;
paginationInfo.pageSizes = [10, 20, 50, 100];
paginationInfo.startItemIndex = 1;
paginationInfo.endItemIndex = 20;
paginationInfo.totalItemsCount = 124;
paginationInfo.pageItemCountTitle = 'Items per page';
paginationInfo.fromLabel = 'of';
paginationInfo.currentAvailableItemTitle = 'Available items';
paginationInfo.showPersianNumber = false;

paginationInfo.addEventListener('page-size-change', (event) => {
  console.log(event.detail.pageSize);
});

jb-pagination-info API

| name | type | description | | --- | --- | --- | | pageSize | property | Current selected page size. | | pageSizes | property | Available page-size options. Default is [20, 30, 50, 100]. | | startItemIndex | property | First visible item index. | | endItemIndex | property | Last visible item index. | | totalItemsCount | property | Total item count. | | pageItemCountTitle | property | Tooltip text for the page-size section. | | fromLabel | property | Label rendered before the total count. | | currentAvailableItemTitle | property | Tooltip text for the total count. | | showPersianNumber | property | Converts displayed numbers to Persian digits when true. | | page-size-change | event | Fired when the selected page size changes. Event detail is { pageSize }. |

Utility Icons

The grid uses jb-icons/refresh for its refresh control and jb-icons/expand for its fullscreen control.

<jb-icon-refresh></jb-icon-refresh>
<jb-icon-expand></jb-icon-expand>

jb-icon-refresh API

| name | type | description | | --- | --- | --- | | isLoading | property | Starts rotation when true. When changed to false, the active rotation finishes before repetition stops. |

Import it directly from the icon package when using it outside the grid:

import "jb-icons/refresh";

jb-icon-expand API

| name | type | description | | --- | --- | --- | | isExpanded | property | Animates to the collapse state when true and back to the expand state when false. |

Import it directly from the icon package when using it outside the grid:

import "jb-icons/expand";