Clarity DataGrid自定义字符串过滤及JSON配置生成技术问询

Alright, let's get your Clarity DataGrid up and running with that JSON config, plus add the custom string filtering you need. First, let's fix up the incomplete row data in your config, then walk through the component and template code step by step.

Step 1: Complete Your JSON Configuration #

Your original rows array was cut off, so here's a full, workable version with sample data that matches your column setup:

values: any = {
  columns: [
    { id: 'name', type: 'text', value: 'Name', isFilterable: true, inputs: {} },
    { id: 'class', type: 'select', value: 'Class', isFilterable: false, inputs: { values: ['COE','SEM','MEC'], selectModel: 'hello' } },
    { id: 'play', type: 'text', value: 'Play', isFilterable: false, inputs: {} },
    { id: 'status', type: 'text', value: 'Status', isFilterable: true, inputs: {} }
  ],
  rows: [
    { 
      name: { type: 'text', inputs: {}, value: 'Varun' },
      class: { type: 'select', inputs: { values: ['COE','SEM','MEC'] }, value: 'COE' },
      play: { type: 'text', inputs: {}, value: 'Football' },
      status: { type: 'text', inputs: {}, value: 'Active' }
    },
    { 
      name: { type: 'text', inputs: {}, value: 'Priya' },
      class: { type: 'select', inputs: { values: ['COE','SEM','MEC'] }, value: 'SEM' },
      play: { type: 'text', inputs: {}, value: 'Basketball' },
      status: { type: 'text', inputs: {}, value: 'Inactive' }
    },
    { 
      name: { type: 'text', inputs: {}, value: 'Rahul' },
      class: { type: 'select', inputs: { values: ['COE','SEM','MEC'] }, value: 'MEC' },
      play: { type: 'text', inputs: {}, value: 'Cricket' },
      status: { type: 'text', inputs: {}, value: 'Active' }
    }
  ]
};

Step 2: Component Logic for Filtering #

In your Angular component, add properties to track the filter keyword and filtered rows, plus a function to handle the custom filtering:

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

@Component({
  selector: 'app-custom-datagrid',
  templateUrl: './custom-datagrid.component.html',
  styleUrls: ['./custom-datagrid.component.css']
})
export class CustomDatagridComponent implements OnInit {
  values: any = { /* Paste the complete config from Step 1 here */ };
  filteredRows: any[] = [];
  filterKeyword: string = '';

  ngOnInit() {
    // Initialize filtered rows with all data
    this.filteredRows = [...this.values.rows];
  }

  applyFilter() {
    // If keyword is empty, reset to all rows
    if (!this.filterKeyword.trim()) {
      this.filteredRows = [...this.values.rows];
      return;
    }

    const lowerCaseKeyword = this.filterKeyword.toLowerCase();
    // Filter rows only against columns marked as isFilterable
    this.filteredRows = this.values.rows.filter(row => {
      return this.values.columns
        .filter(col => col.isFilterable)
        .some(col => {
          const cellValue = row[col.id]?.value?.toLowerCase() || '';
          return cellValue.includes(lowerCaseKeyword);
        });
    });
  }
}

Step 3: Template to Render the DataGrid #

Now create the template that dynamically renders columns/rows and includes the filter input:

<!-- Global Filter Input -->
<div class="clr-input-group mb-3">
  <label class="clr-input-group__label">Search:</label>
  <input 
    type="text" 
    class="clr-input" 
    [(ngModel)]="filterKeyword"
    (input)="applyFilter()"
    placeholder="Filter by name or status..."
  />
</div>

<!-- Clarity DataGrid -->
<clr-datagrid>
  <!-- Dynamic Columns -->
  <clr-dg-column *ngFor="let col of values.columns">
    {{ col.value }}
    <!-- Optional: Show column-specific filter placeholder if needed -->
    <clr-dg-filter *ngIf="col.isFilterable"></clr-dg-filter>
  </clr-dg-column>

  <!-- Dynamic Rows -->
  <clr-dg-row *ngFor="let row of filteredRows">
    <clr-dg-cell *ngFor="let col of values.columns">
      <!-- Render cell content based on column type -->
      <ng-container [ngSwitch]="col.type">
        <span *ngSwitchCase="'text'">{{ row[col.id].value }}</span>
        <select 
          *ngSwitchCase="'select'" 
          class="clr-select"
          [(ngModel)]="row[col.id].value"
        >
          <option *ngFor="let option of col.inputs.values" [value]="option">
            {{ option }}
          </option>
        </select>
      </ng-container>
    </clr-dg-cell>
  </clr-dg-row>

  <!-- DataGrid Footer -->
  <clr-dg-footer>
    {{ filteredRows.length }} {{ filteredRows.length === 1 ? 'row' : 'rows' }}
  </clr-dg-footer>
</clr-datagrid>

How the Custom Filter Works #

• The filter is case-insensitive and checks only columns where isFilterable: true (in your config, that's name and status).
• As you type in the search box, the applyFilter() function runs in real-time to update the displayed rows.
• If you clear the search box, all rows are restored automatically.
• The grid dynamically adapts to your JSON config: add/remove columns or change their isFilterable flag, and the filter logic will adjust without extra code.

内容的提问来源于stack exchange，提问作者Varun Sharma