求Angular 4.2项目中实现Foo table的非jQuery式Angular方案

Hey there! I get where you're coming from—using jQuery-based FooTable in an Angular project feels clunky, and those repaint issues are no fun. Let's break down your options:

关于 Angular 专属的 FooTable 插件 #

Unfortunately, there's no official or widely maintained FooTable plugin specifically built for Angular 4.x. The original FooTable is deeply tied to jQuery, and back when Angular 4 was active, the ecosystem didn't have as many direct ported components as it does now. Your Google search result is pretty accurate here—you won't find a ready-to-drop-in Angular 4 FooTable plugin.

自定义 FooTable 风格的 Angular 模块 #

The good news is building a custom Angular component that mimics FooTable's core features is totally doable, and it'll fit way better with Angular's philosophy. Here's a step-by-step approach to get you started:

• First, map FooTable's core features to Angular patterns
  List out the features you need most—like column show/hide, pagination, filtering, sorting. Each of these can be implemented using Angular's native tools instead of jQuery's DOM manipulation.

• Build a base table component
  Create an Angular component with a template using native <table> elements. Use *ngFor to render your data rows, and bind data using Angular's property binding ([property]="value"). This way, DOM updates are handled by Angular's change detection, not manual jQuery calls—cutting down on those repaint issues.

• Implement key features one by one

  • Column toggle: Create a child component or dropdown with checkboxes bound to an array of column configs (each with a visible flag). Use *ngIf on table <th> and <td> elements to show/hide columns based on this flag.
  • Filtering: Add an input field, bind its value to a component property, then use an Angular pipe or component method to filter your data array. For better performance, use debounceTime with RxJS to avoid filtering on every keystroke.
  • Pagination: Build a pagination component that takes totalItems, itemsPerPage, and currentPage as inputs. Calculate the sliced data array in your table component and render only the current page's rows.
  • Sorting: Add click handlers to table headers, track the active sort field and direction (asc/desc), then sort your data array in the component when the header is clicked.

• Optimize for performance
  Use ChangeDetectionStrategy.OnPush in your table component to limit change detection runs—this will drastically reduce unnecessary DOM updates and repaints, which was one of your pain points with the jQuery plugin.

• Reuse styles (if needed)
  You can extract the core CSS styles from the original FooTable library (like hover effects, pagination styling) and apply them to your Angular components' class names. No need to include the entire jQuery-dependent CSS file.

Bonus tip #

If you're looking for inspiration, check out how Angular Material's MatTable is structured. While it's not FooTable, it follows Angular's component-driven approach for tables, with modular features for sorting, pagination, and filtering—you can adapt similar patterns to your custom FooTable-style component.

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