Smart Table Web Component

A flexible, lightweight, and framework-agnostic Web Component for displaying tables. Works with Vanilla JS, React, Angular, or any framework that supports Web Components.

Installation

Using npm and yarn

npm install hia-smart-table
yarn add hia-smart-table

Usage

// Vanilla Js

import 'hia-smart-table/dist/smart-table.js';

const table = document.createElement('smart-table');

table.setColumns([
  {
    key: 'patient',
    label: 'Patient Details',
    imageField: 'image',
    merge: [
      { key: 'name' },
      { key: 'age' },
      { key: 'status' },
    ],
    separator: [' ', '<br>', ' - '],
    isSort: true,
  },
  { key: 'age', label: 'Age', isSort: true },
  { key: 'unit', label: 'Unit' },
]);

table.setData([
  { name: 'Ali', age: 25, status: 'Active', unit: 'A', image: '/images/ali.jpg' },
  { name: 'Sara', age: 30, status: 'Inactive', unit: 'B', image: '/images/sara.jpg' },
]);

document.body.appendChild(table);

// React Js

import 'hia-smart-table/dist/smart-table.js';
import { useRef, useEffect } from 'react';

export default function App() {
  const tableRef = useRef(null);

  useEffect(() => {
    const table = tableRef.current;
    table.setColumns([
      { key: 'name', label: 'Name', isSort: true },
      { key: 'age', label: 'Age', isSort: true },
    ]);

    table.setData([
      { name: 'Ali', age: 25 },
      { name: 'Sara', age: 30 },
    ]);
  }, []);

  return <smart-table ref={tableRef} page-size={2}></smart-table>;
}

Attributes

| Attribute | Type | Default | Description | | --------- | ------- | ------- | ------------------------------------- | | isBorder | boolean | false | Show table borders | | page-size | number | 10 | Number of rows per page (pagination) | | theme | JSON | {} | Custom theme object for table styling |

Pagination Example

<smart-table page-size="5"></smart-table>

Sorting Example

table.setColumns([
  { key: 'name', label: 'Name', isSort: true },
  { key: 'age', label: 'Age', isSort: true },
]);

Merged Columns Example

table.setColumns([
  {
    key: 'patient',
    label: 'Patient Details',
    merge: [
      { key: 'name' },
      { key: 'age' },
      { key: 'status' },
    ],
    separator: [' ', '<br>', ' - '],
  },
]);

• Combines multiple fields into a single column.
• Supports custom separators and inline styling per field.

Display Images in Cells

{
  key: 'avatar',
  imageField: 'profilePic',
}

• Shows image inside a cell.
• Automatically handles sizing and styling.

Custom Styling / Theme

table.setTheme({
  table_theme: {
    table: { borderRadius: '12px', background: '#fefefe' },
    th: { background: '#f0f0f0', color: '#333' },
    td: { color: '#555', fontSize: '14px' },
  }
});

• Customize table, row, header, and cell styles via theme object.
• Supports any CSS properties.

Complete Example with Pagination, Sorting, and Theme

const table = document.createElement('smart-table');

table.setColumns([
  {
    key: 'patient',
    label: 'Patient Details',
    imageField: 'image',
    merge: [
      { key: 'name' },
      { key: 'age' },
      { key: 'status' },
    ],
    separator: [' ', '<br>', ' - '],
    isSort: true,
  },
  { key: 'age', label: 'Age', isSort: true },
  { key: 'unit', label: 'Unit' },
]);

table.setData([
  { name: 'Ali', age: 25, status: 'Active', unit: 'A', image: '/images/ali.jpg' },
  { name: 'Sara', age: 30, status: 'Inactive', unit: 'B', image: '/images/sara.jpg' },
]);

table.setTheme({
  table_theme: {
    table: { borderRadius: '10px', background: '#fff' },
    th: { background: '#eee', color: '#222' },
    td: { color: '#555', fontSize: '14px' },
  }
});

table.setAttribute('page-size', '5');
table.setAttribute('isBorder', 'true');

document.body.appendChild(table);

Notes

Fully framework-agnostic: can be used with Vanilla JS, React, Angular, or any modern framework.

Lightweight and optimized for performance.

Supports dynamic data updates: call setData() to refresh table contents.

Supports dynamic column updates: call setColumns() to modify column structure.