七棵菜表格

angular表格，UI库为Nebular9

安装

npm install seven-food-table

使用

import { SfTableComponent, SfTableSettings, SfAsyncDataSource } from 'seven-food-table';
@Component({
  selector: 'app-root',
  imports: [NbLayoutModule, SfTableComponent],
  templateUrl: './app.html',
})
export class App implements OnInit {
  tableSettings: SfTableSettings = {
    columns: {
      id: { title: 'ID', sort: true, filter: true, isKey: true, display: false },
      name: { title: 'Name', sort: true, filter: true, editable: true, width: '50px', },
      email: { title: 'Email', filter: false, editable: true, valuePrepareFunction: (value: any) => {
          return "邮箱：" + value;
        } },
      disabled: {
        title: 'Disabled',
        editable: true,
        editor: { type: 'boolean'},
        filter: { type: 'boolean' },
      },
      status: {
        title: 'Status',
        type: 'select',
        editable: true,
        filter: { type: 'select', config: { list: [
          { value: 'active', title: 'Active' },
          { value: 'inactive', title: 'Inactive' }
        ], matchType: 'exact' }},
        editor: { type: 'select', config: { list: [
          { value: 'active', title: 'Active' },
          { value: 'inactive', title: 'Inactive' }
        ] }},
        renderComponent: StatusBadgeComponent,
      },
      createdAt: {
        title: 'Created At',
        type: 'date',
        sort: true,
        filter: {type: 'date', config: { matchType: 'contains', valueType: 'date' }},
        editable: true,
        editor: { type: 'date', config: { required: true }}
      }
    },
    actions: { add: true, edit: true, delete: true, custom: [
        {
          name: 'view_details',
          title: 'View Details',
          icon: 'eye-outline',
          handler: (row: any) => {
            console.log('Viewing details for:', row);
            alert(`Viewing details for ${row.name}`);
          }
        },
        {
          name: 'duplicate',
          title: 'Duplicate',
          icon: 'copy-outline',
          handler: (row: any) => {
            console.log('Duplicating:', row);
          }
        }
      ], toolbar: [
        {
          name: 'export',
          title: 'Export',
          icon: 'download-outline',
          handler: () => {
            console.log('Exporting data');
          }
        }
      ] },
    pager: { perPage: 10, perPageOptions: [5, 10, 20, 50], display: true },
    selectable: true,
    noDataMessage: 'No records found'
  };

  data = [
    { id: 1, name: 'John Doe', email: '[email protected]', disabled: false, status: 'active', createdAt: new Date('2023-01-01') },
    { id: 2, name: 'Jane Smith', email: '[email protected]', disabled: false, status: 'inactive', createdAt: new Date('2026-05-02') }
  ];

  datasource: SfAsyncDataSource;

  constructor() {
    this.datasource = new SfAsyncDataSource();
    this.datasource.setEndpoint('http://localhost:3000/api/users');
  }
}

<!-- 外围包裹NbLayout -->
<nb-layout>
  <nb-layout-column>
    <sf-table
      [settings]="tableSettings"
      [dataSource]="datasource"
      (rowSelect)="onRowSelect($event)"
      (edit)="onEdit($event)"
      (create)="onCreate($event)"
      (delete)="onDelete($event)"
      (customAction)="onCustomAction($event)"
    />
  </nb-layout-column>
</nb-layout>

app.config.ts注入nebular依赖

importProvidersFrom(
  NbThemeModule.forRoot({ name: 'default' }),
  NbDatepickerModule.forRoot(),
  NbMenuModule.forRoot(),
  NbEvaIconsModule,
)