Angular Generic Table 使用教程

孙诗嘉Song-Thrush

于 2024-09-01 07:57:41 发布

阅读量1k

点赞数 21

本文链接：https://blog.csdn.net/gitblog_01145/article/details/141768506

版权

Angular Generic Table 使用教程

angular-generic-tableA generic table for Angular 2+. Generic table uses standard markup for tables ie. table, tr and td elements etc. and has support for expanding rows, global search, filters, sorting, pagination, export to CSV, column clicks, custom column rendering, custom export values.项目地址:https://gitcode.com/gh_mirrors/an/angular-generic-table

项目介绍

Angular Generic Table 是一个为 Angular 2+ 设计的通用表格组件。它使用标准的 HTML 表格标记（如 <table>, <tr>, <td> 等），并支持行展开、全局搜索过滤、排序、分页、导出为 CSV、列点击、自定义列渲染和自定义导出值等功能。该项目在 GitHub 上开源，遵循 MIT 许可证。

项目快速启动

安装

首先，确保你已经安装了 Angular CLI。如果没有，可以通过以下命令安装：

npm install -g @angular/cli

然后，克隆项目仓库并安装依赖：

git clone https://github.com/hjalmers/angular-generic-table.git
cd angular-generic-table
npm install

运行项目

在项目目录中运行以下命令以启动开发服务器：

ng serve

打开浏览器并访问 http://localhost:4200/，你应该能看到 Angular Generic Table 的示例页面。

基本使用

在你的 Angular 组件中使用 Angular Generic Table：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <generic-table [gtFields]="fields" [gtData]="data"></generic-table>
  `
})
export class AppComponent {
  fields = [
    { name: 'id', title: 'ID' },
    { name: 'name', title: 'Name' },
    { name: 'age', title: 'Age' }
  ];

  data = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 35 }
  ];
}