@avoraui/av-data-table 0.0.5 → 0.0.6

package/src/lib/av-data-table.ts

@@ -0,0 +1,666 @@
+import { Component, EventEmitter, forwardRef, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { MatCard, MatCardContent } from "@angular/material/card";
+import { MatIcon } from "@angular/material/icon";
+import { MatIconButton } from "@angular/material/button";
+import { CommonModule } from "@angular/common";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { MatPaginator, PageEvent } from "@angular/material/paginator";
+import { MatMenuModule } from "@angular/material/menu";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { MatSelectModule } from "@angular/material/select";
+import { MatButtonModule } from "@angular/material/button";
+import { FormsModule } from "@angular/forms";
+import { Headers, Columns } from './table-prop';
+
+/**
+ * AvDataTable is a standalone Angular component that provides a feature-rich, customizable
+ * data table interface with advanced pagination, dynamic column rendering, and interactive row actions.
+ * It offers a flexible and powerful solution for displaying and managing tabular data with support for
+ * nested object properties, custom styling, and comprehensive CRUD operations.
+ *
+ * The component implements ControlValueAccessor to integrate seamlessly with Angular reactive forms,
+ * supporting bidirectional data binding and form validation. It features server-side and client-side
+ * pagination, dynamic grid layout calculation, configurable action columns, and event-driven architecture
+ * for parent component interaction. The table supports nested property access with dot notation, custom
+ * column alignment, color customization, and intelligent data synchronization.
+ *
+ * @template T - The type of items displayed in the table rows.
+ *
+ * <p><strong>Features</strong></p>
+ * <ul>
+ *    <li>Advanced pagination with configurable page sizes and options</li>
+ *    <li>Dynamic grid template generation based on column count</li>
+ *    <li>Nested object property access using dot notation (e.g., 'user.address.city')</li>
+ *    <li>Array value handling with automatic formatting and joining</li>
+ *    <li>Configurable action column with modify and delete operations</li>
+ *    <li>Individual control over action button visibility and disabled states</li>
+ *    <li>Custom column alignment (left, center, right) for headers and data</li>
+ *    <li>Dynamic color customization for table cells</li>
+ *    <li>Event emitters for modify, add, and remove operations</li>
+ *    <li>Automatic page adjustment when data changes or items are removed</li>
+ *    <li>Two-way data synchronization between internal and external data sources</li>
+ *    <li>Angular reactive forms integration via ControlValueAccessor</li>
+ *    <li>Material Design UI components integration</li>
+ *    <li>Change detection optimization with explicit data reference updates</li>
+ *    <li>Graceful handling of null/undefined values with fallback display</li>
+ * </ul>
+ *
+ * <p><strong>Technical Implementation</strong></p>
+ * <ul>
+ *    <li>Dynamic CSS Grid layout calculation for responsive column sizing</li>
+ *    <li>Paginated data slicing with index transformation for accurate positioning</li>
+ *    <li>Nested property resolution with array mapping and filtering</li>
+ *    <li>Data synchronization using efficient object reference and length comparison</li>
+ *    <li>Event-driven communication pattern with parent components</li>
+ *    <li>Lifecycle management with OnInit and OnChanges implementations</li>
+ *    <li>Conditional action execution based on disabled state flags</li>
+ *    <li>Automatic pagination state management and validation</li>
+ * </ul>
+ *
+ * <p><strong>Event Handling</strong></p>
+ * <ul>
+ *    <li><b>onModify:</b> Emits when a row modification is requested, includes index, item data, and disabled state</li>
+ *    <li><b>onNewItemAdded:</b> Emits when a new item is added to the table</li>
+ *    <li><b>onItemRemoved:</b> Emits when an item is removed, includes index, data size, removed item, and disabled state</li>
+ * </ul>
+ *
+ * <p><strong>Configuration Options</strong></p>
+ * <ul>
+ *    <li>PageSize: Number of rows per page (default: 5)</li>
+ *    <li>PageSizeOptions: Array of available page size options</li>
+ *    <li>TableHeaders: Column header definitions with labels and alignment</li>
+ *    <li>TableColumns: Column data definitions with field names, alignment, and colors</li>
+ *    <li>EnableActionColumn: Toggle visibility of action column</li>
+ *    <li>EnableButtonDelete: Control delete button visibility</li>
+ *    <li>EnableButtonModify: Control modify button visibility</li>
+ *    <li>DisableRemove: Prevent item removal while maintaining event emission</li>
+ *    <li>DisableModify: Prevent item modification while maintaining event emission</li>
+ * </ul>
+ *
+ * <p><strong>Authorship</strong></p>
+ * <ul>
+ *    <li><b>Author:</b> Dileesha Ekanayake</li>
+ *    <li><b>Email:</b> dileesha.r.ekanayake@gmail.com</li>
+ *    <li><b>Created:</b> 2024</li>
+ *    <li><b>Version:</b> 1.0.0</li>
+ *    <li><b>Responsibility:</b> Design, implementation, and documentation of the data table component
+ *        with Angular Material integration. Provides comprehensive table functionality including
+ *        pagination, nested property access, dynamic styling, CRUD operations, and seamless form
+ *        control integration with reactive forms support. Ensures robust data synchronization,
+ *        event-driven architecture, and flexible configuration options for diverse use cases.</li>
+ * </ul>
+ */
+@Component({
+  selector: 'av-data-table',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AvDataTable),
+      multi: true
+    }
+  ],
+  imports: [
+    MatCard,
+    MatCardContent,
+    MatIcon,
+    MatIconButton,
+    CommonModule,
+    MatPaginator,
+    MatMenuModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatButtonModule,
+    FormsModule
+  ],
+  templateUrl: './av-data-table.html',
+  styleUrl: './av-data-table.css',
+  standalone: true
+})
+export class AvDataTable implements OnInit, OnChanges, ControlValueAccessor {
+
+  @Input() PageSize: number = 5;
+  @Input() PageSizeOptions: Array<number> = [];
+  @Input() currentPage: number = 0;
+  @Input() TableHeaders: Headers[] = [];
+  @Input() TableColumns: Columns[] = [];
+  protected TableData: any[] = [];
+  @Input() Data: any[] = [];
+  @Input() EnableActionColumn: boolean = false;
+  @Input() EnableButtonDelete: boolean = false;
+  @Input() EnableButtonModify: boolean = false;
+  @Output() onModify = new EventEmitter<{ index: number; modifiedItem: any, disabled: boolean }>();
+  @Output() onNewItemAdded = new EventEmitter<{ index: number, dataSize: number, removedItem: any }>();
+  @Output() onItemRemoved = new EventEmitter<{ index: number, dataSize: number, removedItem: any, disabled: boolean }>();
+  @Input() DisableRemove: boolean = false;
+  @Input() DisableModify: boolean = false;
+  gridTemplateColumns: string = '';
+
+  // New features state
+  sortField: string = '';
+  sortDirection: 'asc' | 'desc' | '' = '';
+  globalSearchTerm: string = '';
+  columnFilters: Map<string, { matchMode: 'all' | 'any', rules: { operator: string, value: string }[] }> = new Map();
+  processedData: any[] = [];
+
+  private onChange: (value: any) => void = () => { };
+  private onTouched: () => void = () => { };
+
+  constructor(
+  ) {
+  }
+
+  /**
+   * Lifecycle hook that is called after Angular has initialized all data-bound properties of a directive.
+   * This method is used to perform initialization logic for the component.
+   *
+   * It executes the following:
+   * - Initializes the paginator for managing paginated data display.
+   * - Calculates the grid template for layout adjustments.
+   * - Synchronizes data sources to ensure the component has up-to-date data.
+   *
+   * @return {void} This method does not return any value.
+   */
+  ngOnInit(): void {
+    this.initializePaginator();
+    this.calculateGridTemplate();
+    this.syncDataSources();
+    this.applyAllFilters();
+  }
+
+  /**
+   * Initializes the paginator configuration. Sets default values for PageSize, PageSizeOptions,
+   * and currentPage if they are undefined, null, or invalid. Ensures the PageSize is included
+   * in the PageSizeOptions array and sorts the options in ascending order.
+   *
+   * @return {void} Does not return a value.
+   */
+  initializePaginator(): void {
+    if (this.PageSize === undefined || this.PageSize === null || this.PageSize <= 0) {
+      this.PageSize = 5;
+    }
+    if (this.PageSizeOptions === undefined || this.PageSizeOptions === null || this.PageSizeOptions.length === 0) {
+      this.PageSizeOptions = [5, 10, 20, 50];
+    }
+    if (this.currentPage === undefined || this.currentPage === null || this.currentPage < 0) {
+      this.currentPage = 0;
+    }
+
+    // Ensure PageSize is included in PageSizeOptions if not already present
+    if (!this.PageSizeOptions.includes(this.PageSize)) {
+      this.PageSizeOptions = [...this.PageSizeOptions, this.PageSize].sort((a, b) => a - b);
+    }
+  }
+
+  /**
+   * Handles changes to the component's input properties during the lifecycle of the component.
+   *
+   * This method is triggered whenever an input property bound to the component changes. It processes
+   * updates to properties such as `Data`, `PageSize`, `PageSizeOptions`, and `currentPage`, and
+   * ensures the internal state is kept in sync with the new inputs. Additionally, it updates the paginator
+   * and adjusts the current page as necessary.
+   *
+   * @param {SimpleChanges} changes - A collection of SimpleChange objects representing the changed properties.
+   * Each `SimpleChange` object provides information like the current and previous values as well as a flag
+   * indicating if it is the first change to this input.
+   * @return {void} - This method does not return any value.
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    // Listen for changes in the external Data input
+    if (changes['Data'] && !changes['Data'].firstChange) {
+      this.syncDataSources();
+      this.applyAllFilters();
+      // Reset to first page when data changes
+      this.currentPage = 0;
+    }
+
+    // Handle changes in pagination settings
+    if (changes['PageSize'] || changes['PageSizeOptions'] || changes['currentPage']) {
+      this.initializePaginator();
+
+      // Validate current page doesn't exceed available pages
+      const totalPages = Math.ceil(this.processedData.length / this.PageSize);
+      if (this.currentPage >= totalPages && totalPages > 0) {
+        this.currentPage = totalPages - 1;
+      }
+    }
+  }
+
+  /**
+   * Retrieves a subset of data from the full dataset based on the current page and page size.
+   *
+   * @return {Array} A portion of the TableData array corresponding to the current page.
+   */
+  getPaginatedData(): Array<any> {
+    const startIndex = this.currentPage * this.PageSize;
+    const endIndex = startIndex + this.PageSize;
+    return this.processedData.slice(startIndex, endIndex);
+  }
+
+  /**
+   * Handles changes in the pagination state, such as changing the current page or the page size.
+   *
+   * @param {PageEvent} event - The event triggered by a pagination action that contains the updated page index and page size.
+   * @return {void} This method does not return anything.
+   */
+  pageChange(event: PageEvent): void {
+    this.currentPage = event.pageIndex;
+    this.PageSize = event.pageSize;
+  }
+
+  /**
+   * Calculates the actual index in the dataset based on the paginated index.
+   *
+   * @param {number} paginatedIndex - The index within the current page of paginated data.
+   * @return {number} The actual index in the entire dataset.
+   */
+  getActualIndex(paginatedIndex: number): number {
+    const item = this.getPaginatedData()[paginatedIndex];
+    return item ? this.TableData.indexOf(item) : -1;
+  }
+
+  /**
+   * Synchronizes external data source with the internal TableData.
+   * If the external Data differs from the current TableData, the TableData
+   * is updated with the values from Data and a change notification is triggered.
+   *
+   * @return {void} This method does not return a value.
+   */
+  syncDataSources(): void {
+    if (this.Data && (this.TableData.length !== this.Data.length || this.TableData !== this.Data)) {
+      this.TableData = [...this.Data];
+      this.applyAllFilters();
+      this.onChange(this.TableData);
+    }
+  }
+
+  /**
+   * Updates the form value by notifying changes and updating external data if available.
+   * This method triggers the onChange callback with the current table data
+   * and notifies that the form field has been touched. Additionally, it updates
+   * the external data reference to ensure proper change detection in the parent components.
+   *
+   * @return {void} No return value.
+   */
+  updateFormValue(): void {
+    // Notify the form about the change
+    if (this.onChange) {
+      this.onChange(this.TableData);
+      this.onTouched();
+    }
+
+    // Also update the external Data if it exists
+    if (this.Data) {
+      // Create a new reference to trigger OnChanges in parent components
+      this.Data = [...this.TableData];
+    }
+  }
+
+  /**
+   * Calculates and sets the grid template for a layout based on the number of displayed headers
+   * and the presence of an action column. The grid template determines the column structure with
+   * equal fractions for data columns and a fixed width for the action column if enabled.
+   *
+   * @return {void} Does not return a value. Sets the `gridTemplateColumns` property to the calculated template.
+   */
+  calculateGridTemplate(): void {
+    // Calculate grid template based on columns count
+    const displayedHeaders = this.getDisplayedHeaders();
+    const columnsCount = displayedHeaders.length;
+
+    if (columnsCount === 0) return;
+
+    // Create grid template with equal fractions for data columns
+    // and fixed width for action column if enabled
+    if (this.EnableActionColumn) {
+      const dataColumns = columnsCount - 1; // Subtract action column
+      this.gridTemplateColumns = dataColumns > 0
+        ? `repeat(${dataColumns}, 1fr) 140px`
+        : '140px';
+    } else {
+      this.gridTemplateColumns = `repeat(${columnsCount}, 1fr)`;
+    }
+  }
+
+  /**
+   * Retrieves the headers that should be displayed in the table.
+   * The method includes or excludes the "action" column based on the value of `EnableActionColumn`.
+   *
+   * @return {TableProp[]} An array of headers to be displayed in the table. If `EnableActionColumn` is false, the "action" column is excluded.
+   */
+  getDisplayedHeaders(): Headers[] {
+    return this.EnableActionColumn
+      ? this.TableHeaders
+      : this.TableHeaders.filter(h => h.label.toLowerCase() !== 'action');
+  }
+
+  /**
+   * Generates and returns an object representing CSS classes for a header based on its alignment property.
+   *
+   * @param {TableProp} header - An object containing header properties, including an alignment property ('center', 'right', or 'left').
+   * @return {Object} An object mapping class names to a boolean indicating their applicability based on the alignment of the header.
+   */
+  getHeaderFieldClasses(header: Headers): object {
+    return {
+      'header-text-center': header.align === 'center',
+      'header-text-right': header.align === 'right',
+      'header-text-left': header.align === 'left',
+    };
+  }
+
+  /**
+   * Generates a mapping of CSS classes for a data field based on the alignment property of the given column.
+   *
+   * @param {Columns} column - The column object containing alignment information.
+   * @return {Object} An object where the keys are class names, and the values are booleans indicating whether each class applies.
+   */
+  getDataFieldClasses(column: Columns): object {
+    return {
+      'text-center': column.align === 'center',
+      'text-right': column.align === 'right',
+      'text-left': column.align === 'left',
+    };
+  }
+
+  /**
+   * Retrieves the color property from the given column object.
+   *
+   * @param {Columns} column - The column object containing the color property.
+   * @return {string} The color associated with the column.
+   */
+  getDataFiledColor(column: Columns): any {
+    return column.color;
+  }
+
+  /**
+   * Retrieves the value of a specified column from the given item.
+   *
+   * @param {any} item - The object containing the data to extract the value from.
+   * @param {Columns} column - The column definition, including the field name or path.
+   * @return {string} The value of the specified column for the given item. If the field is not found, an empty string is returned.
+   */
+  getValueForColumn(item: any, column: Columns): string {
+    if (!item || !column || !column.field) return '';
+
+    // Check if the field has dot notation (e.g., 'gender.name')
+    if (column.field.includes('.')) {
+      return this.getNestedValue(item, column.field);
+    } else {
+      // Handle standard fields
+      return column.field in item ? item[column.field] : '';
+    }
+  }
+
+  /**
+   * Retrieves a nested value from a given object based on a dot-separated path string.
+   * If the path does not exist or the value is undefined/null, it returns a placeholder '-'.
+   * If accessing an array, it maps the values at the given key and processes them.
+   *
+   * @param {any} object - The object from which the nested value is extracted.
+   * @param {string} path - The dot-separated string representing the path to the desired value.
+   * @return {any} The value found at the given path, an array joined into a string, or '-' if not found.
+   */
+  getNestedValue(object: any, path: string): any {
+    // Return early if object is null or undefined
+    if (!object) return '-';
+
+    // Split the path into individual keys (e.g., "gender.name" → ["gender", "name"])
+    const keys = path.split('.');
+    let value = object;
+
+    // Navigate through the object hierarchy
+    for (const key of keys) {
+      if (value === null || value === undefined) {
+        return '-';
+      }
+
+      if (Array.isArray(value)) {
+        // If we encounter an array, map over its items to extract the property
+        value = value.map(item => item[key]).filter(Boolean);
+      } else {
+        // Access the next property level
+        value = value[key];
+      }
+    }
+
+    // Format the final result
+    if (Array.isArray(value)) {
+      return value.length > 0 ? value.join(', ') : '-';
+    }
+
+    return value !== null && value !== undefined ? value : '-';
+  }
+
+  /**
+   * Removes an item from the data table at the specified index.
+   *
+   * @param {number} actualIndex - The index of the item to remove from the data table.
+   * @return {void} This method does not return a value.
+   */
+  removeItem(actualIndex: number): void {
+    // Check disable condition FIRST - before touching any data
+    if (this.DisableRemove) {
+      // Don't remove from TableData, just emit event for parent to handle
+      this.onItemRemoved.emit({
+        index: actualIndex,
+        dataSize: this.TableData.length,
+        removedItem: this.TableData[actualIndex], // Get the item that would be removed
+        disabled: true
+      });
+      return; // Exit early - don't modify TableData
+    } else {
+      // Only proceed with actual removal if not disabled
+      const newData = [...this.TableData];
+      const removedData = newData[actualIndex]; // Get the item being removed
+      newData.splice(actualIndex, 1);
+      this.TableData = newData;
+
+      // Rest of your existing logic...
+      const totalPages = Math.ceil(this.TableData.length / this.PageSize);
+      if (this.currentPage >= totalPages && this.currentPage > 0) {
+        this.currentPage = totalPages - 1;
+      }
+
+      if (this.TableData.length === 0) {
+        this.onChange([removedData]);
+      } else {
+        this.updateFormValue();
+      }
+
+      this.applyAllFilters();
+
+      this.onItemRemoved.emit({
+        index: actualIndex,
+        dataSize: this.TableData.length,
+        removedItem: removedData,
+        disabled: false
+      });
+    }
+  }
+
+  /**
+   * Modifies an item at the specified index in the dataset. If the modification is disabled, emits an event without making any changes.
+   *
+   * @param {number} actualIndex - The index of the item to be modified in the dataset.
+   * @return {void} This method does not return a value.
+   */
+  modifyItem(actualIndex: number): void {
+    // Check disable condition FIRST - before any modification logic
+    if (this.DisableModify) {
+      // Emit event for parent to handle the disabled state
+      this.onModify.emit({
+        index: actualIndex,
+        modifiedItem: this.TableData[actualIndex],
+        disabled: true
+      });
+      return; // Exit early - don't proceed with modification
+    }
+
+    // Only proceed with modification if not disabled
+    const modifiedItem = this.TableData[actualIndex];
+    this.onModify.emit({
+      index: actualIndex,
+      modifiedItem,
+      disabled: false
+    });
+  }
+
+  // ControlValueAccessor interface implementation
+  /**
+   * Registers a callback function to be called whenever the value changes.
+   *
+   * @param {any} fn - The function to be executed on a value change.
+   * @return {void} This method does not return a value.
+   */
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  /**
+   * Registers a callback function that should be called when the control is touched.
+   *
+   * @param {any} fn - The callback function to execute when the control is touched.
+   * @return {void} This method does not return a value.
+   */
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  /**
+   * Writes a new value to the table data and resets to the first page.
+   *
+   * @param {any[]} value - The array of data to be written to the table.
+   * @return {void} Does not return a value.
+   */
+  writeValue(value: any[]): void {
+    if (value) {
+      this.TableData = [...value];
+      this.applyAllFilters();
+      // Reset to first page when new data is written
+      this.currentPage = 0;
+    } else {
+      this.TableData = [];
+      this.processedData = [];
+      this.currentPage = 0;
+    }
+  }
+
+  // Sorting Logic
+  toggleSort(field: string): void {
+    if (this.sortField === field) {
+      if (this.sortDirection === 'asc') {
+        this.sortDirection = 'desc';
+      } else if (this.sortDirection === 'desc') {
+        this.sortDirection = '';
+        this.sortField = '';
+      } else {
+        this.sortDirection = 'asc';
+      }
+    } else {
+      this.sortField = field;
+      this.sortDirection = 'asc';
+    }
+    this.applyAllFilters();
+  }
+
+  // Filtering Logic
+  applyAllFilters(): void {
+    let data = [...this.TableData];
+
+    // 1. Global Search
+    if (this.globalSearchTerm) {
+      const term = this.globalSearchTerm.toLowerCase();
+      data = data.filter(item => {
+        return this.TableColumns.some(col => {
+          const val = this.getValueForColumn(item, col);
+          return val?.toString().toLowerCase().includes(term);
+        });
+      });
+    }
+
+    // 2. Column-wise Filters
+    this.columnFilters.forEach((filter, field) => {
+      if (filter.rules.length > 0) {
+        data = data.filter(item => {
+          const val = (this.getValueForColumn(item, { field, align: 'left' } as any) || '').toString().toLowerCase();
+          const ruleResults = filter.rules.map(rule => {
+            const ruleVal = rule.value.toLowerCase();
+            switch (rule.operator) {
+              case 'starts': return val.startsWith(ruleVal);
+              case 'contains': return val.includes(ruleVal);
+              case 'not_contains': return !val.includes(ruleVal);
+              case 'ends': return val.endsWith(ruleVal);
+              case 'equals': return val === ruleVal;
+              case 'not_equals': return val !== ruleVal;
+              default: return true;
+            }
+          });
+
+          return filter.matchMode === 'all'
+            ? ruleResults.every(r => r)
+            : ruleResults.some(r => r);
+        });
+      }
+    });
+
+    // 3. Sorting
+    if (this.sortField && this.sortDirection) {
+      data.sort((a, b) => {
+        const valA = this.getValueForColumn(a, { field: this.sortField, align: 'left' } as any);
+        const valB = this.getValueForColumn(b, { field: this.sortField, align: 'left' } as any);
+
+        if (valA < valB) return this.sortDirection === 'asc' ? -1 : 1;
+        if (valA > valB) return this.sortDirection === 'asc' ? 1 : -1;
+        return 0;
+      });
+    }
+
+    this.processedData = data;
+
+    // Adjust pagination if current page is out of bounds
+    const totalPages = Math.ceil(this.processedData.length / this.PageSize);
+    if (this.currentPage >= totalPages && totalPages > 0) {
+      this.currentPage = totalPages - 1;
+    }
+  }
+
+  clearAllFilters(): void {
+    this.globalSearchTerm = '';
+    this.columnFilters.clear();
+    this.sortField = '';
+    this.sortDirection = '';
+    this.applyAllFilters();
+  }
+
+  updateGlobalSearch(event: any): void {
+    this.globalSearchTerm = event.target.value;
+    this.applyAllFilters();
+  }
+
+  // Column filter management
+  setColumnFilter(field: string, filter: any): void {
+    if (!filter || filter.rules.length === 0) {
+      this.columnFilters.delete(field);
+    } else {
+      this.columnFilters.set(field, filter);
+    }
+    this.applyAllFilters();
+  }
+
+  getColumnFilter(field: string): { matchMode: 'all' | 'any', rules: { operator: string, value: string }[] } {
+    let filter = this.columnFilters.get(field);
+    if (!filter) {
+      filter = { matchMode: 'all', rules: [{ operator: 'starts', value: '' }] };
+      this.columnFilters.set(field, filter);
+    }
+    return filter;
+  }
+
+  // Check if a column has an active filter with actual values (stable during change detection)
+  hasActiveFilter(field: string): boolean {
+    const filter = this.columnFilters.get(field);
+    if (!filter) return false;
+    return filter.rules.some(rule => rule.value !== '');
+  }
+}

package/src/lib/table-prop.ts

@@ -0,0 +1,10 @@
+export interface Headers {
+  label: string;
+  align: 'left' | 'center' | 'right';
+}
+
+export interface Columns {
+  field: string;
+  align: 'left' | 'center' | 'right';
+  color?: string;
+}

package/src/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of data-table
+ */
+
+export * from './lib/av-data-table';
+export * from './lib/table-prop';