@parksw/sw-ui-components 0.0.1 → 0.0.2

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './my-element.js';
 export * from './my-button.js';
 export * from './my-calendar.js';
+export * from './my-grid.js';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './my-element.js';
 export * from './my-button.js';
 export * from './my-calendar.js';
+export * from './my-grid.js';

package/dist/my-grid.d.ts

@@ -0,0 +1,75 @@
+import { LitElement, PropertyValues } from 'lit';
+interface Column {
+    key: string;
+    header: string;
+    linkTemplate?: string;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+}
+export declare class MyGrid extends LitElement {
+    columns: Column[];
+    data: Record<string, unknown>[];
+    itemsPerPage: number;
+    columnReordering: boolean;
+    height: string;
+    enableColumnVisibility: boolean;
+    enableFilter: boolean;
+    rowClass?: (row: Record<string, unknown>) => string;
+    private _sortKey;
+    private _sortDirection;
+    private _draggedColumnIndex;
+    private _dragOverColumnIndex;
+    private _selectedRowId;
+    private _selectedColumnKey;
+    private _filterValues;
+    private _activeFilterColumn;
+    private _filterSearchTerm;
+    private _currentPage;
+    private _hiddenColumns;
+    private _showColumnMenu;
+    private _filterMenuSortDirection;
+    private _resizingColumnIndex;
+    private _startX;
+    private _startWidth;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private _handleDocumentClick;
+    private get _visibleColumns();
+    private get _gridColumnTemplate();
+    private _resetPage;
+    private _toggleColumnMenu;
+    private _toggleColumnVisibility;
+    private _handleItemsPerPageChange;
+    private _handleHeaderClick;
+    private _toggleFilterMenu;
+    private _toggleFilterMenuSort;
+    private _getUniqueValues;
+    private _isFilterActive;
+    private _handleFilterValueChange;
+    private _handleSelectAll;
+    private _handleFilterSearch;
+    private _handleResizeStart;
+    private _handleResizeMove;
+    private _handleResizeEnd;
+    private get _filteredData();
+    private get _sortedData();
+    private get _paginatedData();
+    private _handleCellClick;
+    private _handleDragStart;
+    private _handleDragOver;
+    private _handleDragLeave;
+    private _handleDrop;
+    private _handleDragEnd;
+    private _formatLink;
+    private _renderCell;
+    private _renderColumnMenu;
+    private _renderFilterMenu;
+    private _renderHeader;
+    private _renderBody;
+    private _renderPaginationControls;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export {};

package/dist/my-grid.js

@@ -0,0 +1,852 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { repeat } from 'lit/directives/repeat.js';
+let MyGrid = class MyGrid extends LitElement {
+    constructor() {
+        super();
+        this.columns = [];
+        this.data = [];
+        this.itemsPerPage = 10;
+        this.columnReordering = true;
+        this.height = 'auto';
+        this.enableColumnVisibility = true;
+        this.enableFilter = true;
+        this._sortKey = null;
+        this._sortDirection = 'asc';
+        this._draggedColumnIndex = null;
+        this._dragOverColumnIndex = null;
+        this._selectedRowId = null;
+        this._selectedColumnKey = null;
+        this._filterValues = {};
+        this._activeFilterColumn = null;
+        this._filterSearchTerm = '';
+        this._currentPage = 1;
+        this._hiddenColumns = new Set();
+        this._showColumnMenu = false;
+        this._filterMenuSortDirection = 'asc'; // New state for filter menu sort
+        // Resizing state
+        this._resizingColumnIndex = null;
+        this._startX = 0;
+        this._startWidth = 0;
+        this._handleDocumentClick = this._handleDocumentClick.bind(this);
+        this._handleResizeMove = this._handleResizeMove.bind(this);
+        this._handleResizeEnd = this._handleResizeEnd.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this._handleDocumentClick);
+        document.addEventListener('mousemove', this._handleResizeMove);
+        document.addEventListener('mouseup', this._handleResizeEnd);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this._handleDocumentClick);
+        document.removeEventListener('mousemove', this._handleResizeMove);
+        document.removeEventListener('mouseup', this._handleResizeEnd);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('enableFilter')) {
+            this._filterValues = {};
+            this._activeFilterColumn = null;
+            this._filterSearchTerm = '';
+            this._resetPage();
+        }
+    }
+    _handleDocumentClick(_e) {
+        if (this._showColumnMenu) {
+            this._showColumnMenu = false;
+        }
+        if (this._activeFilterColumn) {
+            this._activeFilterColumn = null;
+            this._filterSearchTerm = '';
+        }
+    }
+    get _visibleColumns() {
+        return this.columns.filter(col => !this._hiddenColumns.has(col.key));
+    }
+    get _gridColumnTemplate() {
+        let template = '';
+        if (this.enableColumnVisibility) {
+            template += '40px ';
+        }
+        template += this._visibleColumns.map(col => col.width || 'minmax(150px, 1fr)').join(' ');
+        return template;
+    }
+    _resetPage() { this._currentPage = 1; }
+    _toggleColumnMenu(e) {
+        e.stopPropagation();
+        this._showColumnMenu = !this._showColumnMenu;
+        this._activeFilterColumn = null;
+    }
+    _toggleColumnVisibility(key) {
+        const newHiddenColumns = new Set(this._hiddenColumns);
+        if (newHiddenColumns.has(key)) {
+            newHiddenColumns.delete(key);
+        }
+        else {
+            newHiddenColumns.add(key);
+        }
+        this._hiddenColumns = newHiddenColumns;
+    }
+    _handleItemsPerPageChange(e) {
+        const select = e.target;
+        this.itemsPerPage = Number(select.value);
+        this._resetPage();
+    }
+    _handleHeaderClick(key) {
+        if (this._sortKey === key) {
+            this._sortDirection = this._sortDirection === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this._sortKey = key;
+            this._sortDirection = 'asc';
+        }
+        this._resetPage();
+    }
+    _toggleFilterMenu(e, key) {
+        e.stopPropagation();
+        if (this._activeFilterColumn === key) {
+            this._activeFilterColumn = null;
+        }
+        else {
+            this._activeFilterColumn = key;
+            this._showColumnMenu = false;
+            this._filterMenuSortDirection = 'asc'; // Reset sort direction when opening menu
+        }
+        this._filterSearchTerm = '';
+    }
+    _toggleFilterMenuSort(e) {
+        e.stopPropagation();
+        this._filterMenuSortDirection = this._filterMenuSortDirection === 'asc' ? 'desc' : 'asc';
+    }
+    _getUniqueValues(key) {
+        const values = new Set(this.data.map(row => row[key]));
+        const sortedValues = Array.from(values).sort((a, b) => {
+            if (a === b)
+                return 0;
+            if (a == null)
+                return 1;
+            if (b == null)
+                return -1;
+            let comparison = 0;
+            if (typeof a === 'number' && typeof b === 'number') {
+                comparison = a - b;
+            }
+            else {
+                // Try to parse as date if string looks like date (YYYY-MM-DD)
+                const dateA = Date.parse(String(a));
+                const dateB = Date.parse(String(b));
+                if (!isNaN(dateA) && !isNaN(dateB) && String(a).includes('-') && String(b).includes('-')) {
+                    comparison = dateA - dateB;
+                }
+                else {
+                    comparison = String(a).localeCompare(String(b));
+                }
+            }
+            return this._filterMenuSortDirection === 'asc' ? comparison : -comparison;
+        });
+        return sortedValues;
+    }
+    _isFilterActive(key) {
+        return !!this._filterValues[key];
+    }
+    _handleFilterValueChange(key, value, checked) {
+        let currentFilters = this._filterValues[key];
+        if (!currentFilters) {
+            if (!checked) {
+                const allValues = this._getUniqueValues(key);
+                currentFilters = new Set(allValues);
+                currentFilters.delete(value);
+                this._filterValues = { ...this._filterValues, [key]: currentFilters };
+            }
+        }
+        else {
+            const newFilters = new Set(currentFilters);
+            if (checked) {
+                newFilters.add(value);
+            }
+            else {
+                newFilters.delete(value);
+            }
+            const allValues = this._getUniqueValues(key);
+            if (newFilters.size === allValues.length) {
+                const newFilterValues = { ...this._filterValues };
+                delete newFilterValues[key];
+                this._filterValues = newFilterValues;
+            }
+            else {
+                this._filterValues = { ...this._filterValues, [key]: newFilters };
+            }
+        }
+        this._resetPage();
+    }
+    _handleSelectAll(key, checked) {
+        if (checked) {
+            const newFilters = { ...this._filterValues };
+            delete newFilters[key];
+            this._filterValues = newFilters;
+        }
+        else {
+            this._filterValues = { ...this._filterValues, [key]: new Set() };
+        }
+        this._resetPage();
+    }
+    _handleFilterSearch(e) {
+        const input = e.target;
+        this._filterSearchTerm = input.value;
+    }
+    // Resize Handlers
+    _handleResizeStart(e, index) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._resizingColumnIndex = index;
+        this._startX = e.pageX;
+        const headerCells = this.shadowRoot?.querySelectorAll('.header-cell');
+        const cellIndex = index + (this.enableColumnVisibility ? 1 : 0);
+        if (headerCells && headerCells[cellIndex]) {
+            const cell = headerCells[cellIndex];
+            this._startWidth = cell.getBoundingClientRect().width;
+        }
+        else {
+            this._startWidth = 150;
+        }
+    }
+    _handleResizeMove(e) {
+        if (this._resizingColumnIndex !== null) {
+            const diff = e.pageX - this._startX;
+            const newWidth = Math.max(50, this._startWidth + diff);
+            const visibleCol = this._visibleColumns[this._resizingColumnIndex];
+            const originalIndex = this.columns.findIndex(c => c.key === visibleCol.key);
+            if (originalIndex !== -1) {
+                const newColumns = [...this.columns];
+                newColumns[originalIndex] = { ...newColumns[originalIndex], width: `${newWidth}px` };
+                this.columns = newColumns;
+            }
+        }
+    }
+    _handleResizeEnd() {
+        this._resizingColumnIndex = null;
+    }
+    get _filteredData() {
+        if (!this.enableFilter) {
+            return this.data;
+        }
+        let filtered = this.data;
+        const activeFilterKeys = Object.keys(this._filterValues);
+        if (activeFilterKeys.length > 0) {
+            filtered = filtered.filter(row => {
+                return activeFilterKeys.every(key => {
+                    const filterSet = this._filterValues[key];
+                    if (!filterSet || filterSet.size === 0)
+                        return false;
+                    if (filterSet)
+                        return filterSet.has(row[key]);
+                    return true;
+                });
+            });
+        }
+        return filtered;
+    }
+    get _sortedData() {
+        const dataToSort = this._filteredData;
+        if (!this._sortKey)
+            return dataToSort;
+        return [...dataToSort].sort((a, b) => {
+            const valA = a[this._sortKey], valB = b[this._sortKey];
+            if (valA === valB)
+                return 0;
+            if (valA == null)
+                return 1;
+            if (valB == null)
+                return -1;
+            let comparison = 0;
+            if (typeof valA === 'string' && typeof valB === 'string')
+                comparison = valA.localeCompare(valB);
+            else if (typeof valA === 'number' && typeof valB === 'number')
+                comparison = valA - valB;
+            else
+                comparison = String(valA).localeCompare(String(valB));
+            return this._sortDirection === 'asc' ? comparison : -comparison;
+        });
+    }
+    get _paginatedData() {
+        const start = (this._currentPage - 1) * this.itemsPerPage;
+        const end = start + this.itemsPerPage;
+        return this._sortedData.slice(start, end);
+    }
+    _handleCellClick(row, colKey) {
+        const rowId = row.id;
+        if (this._selectedRowId === rowId && this._selectedColumnKey === colKey) {
+            this._selectedRowId = null;
+            this._selectedColumnKey = null;
+        }
+        else {
+            this._selectedRowId = rowId;
+            this._selectedColumnKey = colKey;
+        }
+    }
+    _handleDragStart(e, index) {
+        if (this._resizingColumnIndex !== null) {
+            e.preventDefault();
+            return;
+        }
+        if (!this.columnReordering) {
+            e.preventDefault();
+            return;
+        }
+        this._draggedColumnIndex = index;
+        if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', index.toString());
+            const target = e.target;
+            e.dataTransfer.setDragImage(target, e.offsetX, e.offsetY);
+        }
+    }
+    _handleDragOver(e, index) {
+        if (!this.columnReordering)
+            return;
+        e.preventDefault();
+        if (e.dataTransfer) {
+            e.dataTransfer.dropEffect = 'move';
+        }
+        if (this._draggedColumnIndex !== null && this._draggedColumnIndex !== index) {
+            this._dragOverColumnIndex = index;
+        }
+    }
+    _handleDragLeave() {
+        if (!this.columnReordering)
+            return;
+        this._dragOverColumnIndex = null;
+    }
+    _handleDrop(e, dropIndex) {
+        if (!this.columnReordering)
+            return;
+        e.preventDefault();
+        if (e.dataTransfer) {
+            const draggedIndex = parseInt(e.dataTransfer.getData('text/plain'), 10);
+            if (this._draggedColumnIndex !== null && draggedIndex !== dropIndex) {
+                const visibleCols = [...this._visibleColumns];
+                const [draggedColumn] = visibleCols.splice(draggedIndex, 1);
+                visibleCols.splice(dropIndex, 0, draggedColumn);
+                const newColumns = [];
+                let visibleIndex = 0;
+                for (const col of this.columns) {
+                    if (this._hiddenColumns.has(col.key)) {
+                        newColumns.push(col);
+                    }
+                    else {
+                        newColumns.push(visibleCols[visibleIndex++]);
+                    }
+                }
+                this.columns = newColumns;
+            }
+        }
+        this._draggedColumnIndex = null;
+        this._dragOverColumnIndex = null;
+    }
+    _handleDragEnd() {
+        if (!this.columnReordering)
+            return;
+        this._draggedColumnIndex = null;
+        this._dragOverColumnIndex = null;
+    }
+    _formatLink(template, row) {
+        return template.replace(/{(\w+)}/g, (_match, key) => {
+            return row[key] !== undefined ? String(row[key]) : _match;
+        });
+    }
+    _renderCell(row, col) {
+        const cellData = row[col.key];
+        if (col.linkTemplate) {
+            const href = this._formatLink(col.linkTemplate, row);
+            return html `<a href="${href}">${cellData}</a>`;
+        }
+        return cellData;
+    }
+    _renderColumnMenu() {
+        if (!this._showColumnMenu)
+            return null;
+        return html `
+      <div class="column-menu" @click=${(e) => e.stopPropagation()}>
+        ${this.columns.map(col => html `
+          <label>
+            <input
+              type="checkbox"
+              .checked=${!this._hiddenColumns.has(col.key)}
+              @change=${() => this._toggleColumnVisibility(col.key)}
+            />
+            ${col.header}
+          </label>
+        `)}
+      </div>
+    `;
+    }
+    _renderFilterMenu(key, index) {
+        if (this._activeFilterColumn !== key)
+            return null;
+        const uniqueValues = this._getUniqueValues(key);
+        const filteredValues = uniqueValues.filter(v => String(v).toLowerCase().includes(this._filterSearchTerm.toLowerCase()));
+        const currentFilters = this._filterValues[key];
+        const isAllSelected = !currentFilters;
+        const isSelectAllChecked = isAllSelected || (!!currentFilters && filteredValues.every(v => currentFilters.has(v)));
+        const isRightAligned = index > this._visibleColumns.length - 3;
+        const menuClass = isRightAligned ? 'filter-menu right-aligned' : 'filter-menu';
+        return html `
+        <div class="${menuClass}" @click=${(e) => e.stopPropagation()}>
+            <div class="filter-search-container">
+                <input 
+                    type="text" 
+                    class="filter-search" 
+                    placeholder="Search..." 
+                    .value=${this._filterSearchTerm}
+                    @input=${this._handleFilterSearch}
+                />
+                <button class="filter-sort-btn" @click=${this._toggleFilterMenuSort} title="Sort Values">
+                    ${this._filterMenuSortDirection === 'asc' ? '▲' : '▼'}
+                </button>
+            </div>
+            <div class="filter-list">
+                <label>
+                    <input 
+                        type="checkbox" 
+                        .checked=${isSelectAllChecked}
+                        @change=${(e) => this._handleSelectAll(key, e.target.checked)}
+                    />
+                    (Select All)
+                </label>
+                ${filteredValues.map(value => html `
+                    <label>
+                        <input 
+                            type="checkbox" 
+                            .checked=${isAllSelected || (!!currentFilters && currentFilters.has(value))}
+                            @change=${(e) => this._handleFilterValueChange(key, value, e.target.checked)}
+                        />
+                        ${String(value)}
+                    </label>
+                `)}
+            </div>
+        </div>
+      `;
+    }
+    _renderHeader(gridStyles) {
+        return html `
+      <div class="grid-header">
+        <div class="grid-row" style=${styleMap(gridStyles)}>
+          ${when(this.enableColumnVisibility, () => html `
+            <div class="grid-cell header-cell settings-cell" @click=${this._toggleColumnMenu}>
+              ⚙️
+              ${this._renderColumnMenu()}
+            </div>
+          `)}
+          ${this._visibleColumns.map((col, index) => {
+            const headerClasses = {
+                'grid-cell': true,
+                'header-cell': true,
+                'drag-over': this._dragOverColumnIndex === index,
+                'reorderable': this.columnReordering,
+                'align-center': col.align === 'center',
+                'align-right': col.align === 'right',
+            };
+            return html `
+            <div
+              .draggable=${this.columnReordering}
+              class=${classMap(headerClasses)}
+              @click=${() => this._handleHeaderClick(col.key)}
+              @dragstart=${(e) => this._handleDragStart(e, index)}
+              @dragover=${(e) => this._handleDragOver(e, index)}
+              @dragleave=${this._handleDragLeave}
+              @drop=${(e) => this._handleDrop(e, index)}
+              @dragend=${this._handleDragEnd}
+            >
+              <span class="header-text">${col.header}</span>
+              <div class="header-icons">
+                  ${when(this.enableFilter, () => html `
+                    <span class="filter-icon ${this._isFilterActive(col.key) ? 'active' : ''}" @click=${(e) => this._toggleFilterMenu(e, col.key)}>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+                        </svg>
+                    </span>
+                  `)}
+                  ${this._sortKey === col.key ? html `<span class="sort-indicator">${this._sortDirection === 'asc' ? '▲' : '▼'}</span>` : ''}
+              </div>
+              ${this._renderFilterMenu(col.key, index)}
+              <div class="resize-handle" @mousedown=${(e) => this._handleResizeStart(e, index)} @click=${(e) => e.stopPropagation()}></div>
+            </div>
+          `;
+        })}
+        </div>
+      </div>
+    `;
+    }
+    _renderBody(gridStyles) {
+        return html `
+      <div class="grid-body">
+        ${repeat(this._paginatedData, (row) => row.id, (row) => {
+            const customRowClass = this.rowClass ? this.rowClass(row) : '';
+            return html `
+            <div class="grid-row ${customRowClass}" style=${styleMap(gridStyles)}>
+              ${when(this.enableColumnVisibility, () => html `<div class="grid-cell data-cell"></div>`)}
+              ${this._visibleColumns.map(col => {
+                const dataCellClasses = {
+                    'grid-cell': true,
+                    'data-cell': true,
+                    selected: this._selectedRowId === row.id && this._selectedColumnKey === col.key,
+                    'align-center': col.align === 'center',
+                    'align-right': col.align === 'right',
+                    [`col-${col.key}`]: true,
+                };
+                return html `
+                  <div
+                    title="${String(row[col.key] ?? '')}"
+                    class=${classMap(dataCellClasses)}
+                    @click=${() => this._handleCellClick(row, col.key)}
+                  >
+                    ${this._renderCell(row, col)}
+                  </div>
+                `;
+            })}
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
+    _renderPaginationControls() {
+        const totalItems = this._sortedData.length;
+        const totalPages = Math.ceil(totalItems / this.itemsPerPage);
+        if (totalPages <= 1)
+            return '';
+        return html `
+      <div class="pagination">
+        <div class="pagination-group">
+          <button @click=${() => this._currentPage = 1} ?disabled=${this._currentPage === 1}>&lt;&lt; First</button>
+          <button @click=${() => this._currentPage--} ?disabled=${this._currentPage === 1}>&lt; Previous</button>
+        </div>
+        <div class="pagination-info">
+          <span>Page ${this._currentPage} of ${totalPages}</span>
+        </div>
+        <div class="pagination-group">
+          <button @click=${() => this._currentPage++} ?disabled=${this._currentPage === totalPages}>Next &gt;</button>
+          <button @click=${() => this._currentPage = totalPages} ?disabled=${this._currentPage === totalPages}>Last &gt;&gt;</button>
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        const wrapperStyles = { height: this.height };
+        const gridStyles = { 'grid-template-columns': this._gridColumnTemplate };
+        return html `
+      <div class="toolbar">
+        <div class="items-per-page">
+          <span>Rows per page:</span>
+          <select @change=${this._handleItemsPerPageChange} .value=${this.itemsPerPage.toString()}>
+            <option value="10">10</option>
+            <option value="20">20</option>
+            <option value="50">50</option>
+          </select>
+        </div>
+      </div>
+      <div class="grid-wrapper" style=${styleMap(wrapperStyles)}>
+        <div class="grid-container">
+          ${this._renderHeader(gridStyles)}
+          ${this._renderBody(gridStyles)}
+        </div>
+      </div>
+      ${this._renderPaginationControls()}
+    `;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      font-family: sans-serif;
+    }
+    /* Default styles for all elements inside the component */
+    * {
+      box-sizing: border-box;
+      color: #000; /* Default text color black */
+    }
+    input, select, button {
+      background-color: #fff; /* Default background white */
+      color: #000; /* Default text color black */
+      border: 1px solid #ccc;
+    }
+
+    .toolbar { 
+      margin-bottom: 8px; 
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+    .toolbar button { padding: 6px 12px; border-radius: 4px; background-color: #f8f8f8; cursor: pointer; }
+    .toolbar button:hover { background-color: #eee; }
+    
+    .items-per-page {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.9em;
+    }
+    .items-per-page select {
+      padding: 4px 8px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1em;
+      color: #000;
+    }
+    .items-per-page select:hover {
+      border-color: #888;
+    }
+    
+    .grid-wrapper {
+      overflow: auto;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+    .grid-container {
+      display: inline-block;
+      min-width: 100%;
+      vertical-align: top;
+    }
+    .grid-header {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      background-color: #e8e8e8;
+    }
+    .grid-row {
+      display: grid;
+      border-bottom: 1px solid #ddd;
+    }
+    .grid-body .grid-row:last-of-type {
+      border-bottom: none;
+    }
+    .grid-cell {
+      padding: 12px 15px;
+      text-align: left;
+      color: #000;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border-right: 1px solid #ddd; /* Add right border */
+    }
+    .grid-cell:last-child {
+      border-right: none; /* Remove right border for last cell */
+    }
+    .grid-cell.align-center { justify-content: center; text-align: center; }
+    .grid-cell.align-right { justify-content: flex-end; text-align: right; }
+
+    .header-cell {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-weight: bold;
+      cursor: pointer;
+      user-select: none;
+      position: relative;
+      overflow: visible;
+      border-bottom: 1px solid #ccc; /* Add bottom border to header */
+    }
+    .header-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex-grow: 1;
+    }
+    .header-icons {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+    .sort-indicator {
+      flex-shrink: 0;
+    }
+    .filter-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        color: #888; /* Default grey icon */
+        padding: 2px;
+        border-radius: 2px;
+        cursor: pointer;
+    }
+    .filter-icon:hover {
+        color: #000; /* Black icon on hover */
+    }
+    .filter-icon.active {
+        color: #007bff; /* Blue icon when active */
+    }
+
+    .settings-cell {
+      justify-content: center;
+      position: relative;
+      overflow: visible;
+    }
+
+    .column-menu, .filter-menu {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      background-color: white;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      padding: 8px;
+      z-index: 100;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+      min-width: 150px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      max-height: 250px;
+      overflow-y: auto;
+      text-align: left;
+      font-weight: normal;
+    }
+    .filter-menu.right-aligned {
+        left: auto;
+        right: 0;
+    }
+    .column-menu label, .filter-menu label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      font-weight: normal;
+      white-space: nowrap;
+      padding: 2px 0;
+    }
+    .filter-search-container {
+        display: flex;
+        gap: 4px;
+        margin-bottom: 4px;
+    }
+    .filter-search {
+        width: 100%;
+        padding: 4px;
+        border-radius: 4px;
+        flex-grow: 1;
+    }
+    .filter-sort-btn {
+        padding: 4px 8px;
+        cursor: pointer;
+        font-size: 0.8em;
+    }
+
+    .data-cell { cursor: pointer; }
+    .data-cell.selected { background-color: #aedcff; }
+    .data-cell a { color: #007bff; text-decoration: none; }
+    .data-cell a:hover { text-decoration: underline; }
+    
+    .header-cell.reorderable { cursor: grab; }
+    .header-cell.drag-over { background-color: #cceeff; }
+    
+    .grid-body .grid-row:nth-of-type(even) { background-color: #f2f2f2; }
+    .grid-body .grid-row:hover { background-color: #e0e0e0; }
+    
+    .pagination { 
+      display: flex; 
+      justify-content: space-between; 
+      align-items: center; 
+      padding: 12px 0; 
+      font-size: 0.9em; 
+      color: #000;
+    }
+    .pagination-group { display: flex; gap: 8px; }
+    .pagination button { padding: 6px 12px; border-radius: 4px; background-color: #f8f8f8; cursor: pointer; }
+    .pagination button:disabled { cursor: not-allowed; opacity: 0.5; }
+
+    .resize-handle {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 5px;
+      height: 100%;
+      cursor: col-resize;
+      z-index: 1;
+    }
+    .resize-handle:hover {
+      background-color: #007bff;
+    }
+  `; }
+};
+__decorate([
+    property({ type: Array })
+], MyGrid.prototype, "columns", void 0);
+__decorate([
+    property({ type: Array })
+], MyGrid.prototype, "data", void 0);
+__decorate([
+    property({ type: Number })
+], MyGrid.prototype, "itemsPerPage", void 0);
+__decorate([
+    property({ type: Boolean })
+], MyGrid.prototype, "columnReordering", void 0);
+__decorate([
+    property({ type: String })
+], MyGrid.prototype, "height", void 0);
+__decorate([
+    property({ type: Boolean })
+], MyGrid.prototype, "enableColumnVisibility", void 0);
+__decorate([
+    property({ type: Boolean })
+], MyGrid.prototype, "enableFilter", void 0);
+__decorate([
+    property()
+], MyGrid.prototype, "rowClass", void 0);
+__decorate([
+    state()
+], MyGrid.prototype, "_sortKey", void 0);
+__decorate([
+    state()
+], MyGrid.prototype, "_sortDirection", void 0);
+__decorate([
+    state()
+], MyGrid.prototype, "_draggedColumnIndex", void 0);
+__decorate([
+    state()
+], MyGrid.prototype, "_dragOverColumnIndex", void 0);
+__decorate([
+    state()
+], MyGrid.prototype, "_selectedRowId", void 0);
+__decorate([
+    state()
+], MyGrid.prototype, "_selectedColumnKey", void 0);
+__decorate([
+    state()
+], MyGrid.prototype, "_filterValues", void 0);
+__decorate([
+    state()
+], MyGrid.prototype, "_activeFilterColumn", void 0);
+__decorate([
+    state()
+], MyGrid.prototype, "_filterSearchTerm", void 0);
+__decorate([
+    state()
+], MyGrid.prototype, "_currentPage", void 0);
+__decorate([
+    state()
+], MyGrid.prototype, "_hiddenColumns", void 0);
+__decorate([
+    state()
+], MyGrid.prototype, "_showColumnMenu", void 0);
+__decorate([
+    state()
+], MyGrid.prototype, "_filterMenuSortDirection", void 0);
+__decorate([
+    state()
+], MyGrid.prototype, "_resizingColumnIndex", void 0);
+MyGrid = __decorate([
+    customElement('my-grid')
+], MyGrid);
+export { MyGrid };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@parksw/sw-ui-components",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",