DevUI for Angular

The data-table package is organized into core components, models, and various demo implementations.

Core Components

• data-table.component.ts: The main entry point for the data table.
• data-table.module.ts: The Angular module for importing the data table.
• data-table.model.ts: Type definitions for the data table.
• display-cell-value.pipe.ts: A pipe used for cell value display in column configuration mode.
• editor-host.directive.ts: A directive used to host editor components during cell editing.

Available Demo Features

Developers can implement the following patterns using the provided demo code:

• Data Loading: Async loading, Lazy loading, Virtual scroll.
• Layout & Structure: Cell merging, Header grouping (header-grouping, multi-header), Fixed columns (fix-column), Expandable rows (expand-row), Tree tables (tree-table).
• Interactions: Row dragging (drag-row, muti-drag-row), Column dragging (drag-column), Sorting and Filtering, Table interactions.
• Editing: Cell editing (editable).
• Styling: Custom styles (mutil-styles), Max height (fixed header).

The d-avatar component determines what to display based on a specific priority and character processing logic.

Display Priority

The component selects the content to show in the following order of precedence:

1. imgSrc (Custom image)
2. customText (Custom text)
3. name (Generated from name string)

Name Generation Rules

When using the name property, the component generates initials based on these rules:

• Starts with Chinese characters: Takes the last two characters of the string.
• Starts with English characters: Takes the first two characters of the string.
• Multiple English names: Takes the first letter of the first two English names.
• Other (non-Chinese/English): Takes the first two characters of the string.

Special Display Cases

• User does not exist: If name, customText, and imgSrc are all missing, the avatar is treated as if the user does not exist.
• No nickname: If name, customText, or imgSrc are provided but are empty strings, the component uses the default avatar.

The accordion uses a hierarchical data structure defined by AccordionMenuType. Data items can be simple base items, foldable menus, or linkable items.

Data Interfaces

• AccordionBase: Minimum requirement (title: string, optional disabled: boolean).
• AccordionBaseMenu<T>: Extends base with open?: boolean, loading?: boolean, and children?: Array<T>.
• AccordionLinkableItem: Extends base with link?: string, target?: boolean, and linkType?: 'routerLink' | 'hrefLink' | string.
• AccordionMenuItem: A complete item that can be a base item, a foldable menu, and linkable.

Example Structure

// A single item in an AccordionMenuType array
const menuData: AccordionMenuType = [
  {
    title: 'Parent Menu',
    open: true,
    children: [
      {
        title: 'Child Link',
        link: '/home',
        linkType: 'routerLink'
      }
    ]
  }
];

/* 基础数据类型 */
type AccordionMenuItemLinkType = 'routerLink' | 'hrefLink' | string;
export interface AccordionBase {
  title: string;
  disabled?: boolean;
  [prop: string]: any;
}
interface IAccordionActiveable {
  active?: boolean;
}
interface IAccordionFoldable<T> {
  open?: boolean;
  loading?: boolean;
  children?: Array<T>;
}

interface IAccordionLinkable {
  link?: string;
  target?: boolean;
  linkType?: AccordionMenuItemLinkType;
}
export interface AccordionBaseItem extends AccordionBase, IAccordionActiveable {}
export interface AccordionBaseMenu<T> extends AccordionBase, IAccordionFoldable<T> {}

export interface AccordionLinkableItem extends AccordionBase, IAccordionActiveable, IAccordionLinkable {}
export interface AccordionMenuItem extends AccordionBase, IAccordionActiveable, IAccordionFoldable<AccordionMenuItem>, IAccordionLinkable {}

export type AccordionMenuType = Array<AccordionMenuItem>;