How to re-order columns in the list views and add remove columns in Angular?

You can implement the ability to re-order columns and add/remove columns in list views in Angular by using drag and drop functionality for re-ordering and providing options for adding/removing columns using buttons or dropdown menus. You can also store the column configuration in a service or database to persist the user's preferences. There are also third-party libraries available that provide pre-built solutions for implementing these features.

Here are some examples of third-party libraries that can be used to implement re-ordering and column customization in Angular:

1. ng2-dragula: This library provides drag-and-drop functionality for re-ordering elements, including table columns. It's easy to use and has a simple API.

2. ngx-datatable: This library provides a powerful and flexible data table component for Angular, with features such as column re-ordering, resizing, and hiding, as well as pagination, sorting, and filtering.

3. ag-Grid: This library provides a feature-rich data grid component for Angular, with support for column re-ordering, resizing, hiding, and grouping, as well as a wide range of other advanced features such as row virtualization and cell editing.

4. ngxDatatable: This library provides a lightweight and easy-to-use data table component for Angular, with support for column re-ordering, resizing, and hiding, as well as pagination, sorting, and filtering.

To use these libraries, you'll need to install them via npm and import the required modules into your Angular application.

Here's an example of how to use the ngx-datatable library to implement column re-ordering and customization in an Angular component:

1. First, install the ngx-datatable library using npm:

npm install @swimlane/ngx-datatable --save

2. Import the necessary modules in your Angular component:

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

import { ColumnMode } from '@swimlane/ngx-datatable';

3. Define the data for your table, including the columns you want to display:

const rows = [ { name: 'John', age: 25, gender: 'male' }, { name: 'Jane', age: 30, gender: 'female' }, { name: 'Bob', age: 40, gender: 'male' }, { name: 'Alice', age: 35, gender: 'female' }, ]; const columns = [ { name: 'Name', prop: 'name' }, { name: 'Age', prop: 'age' }, { name: 'Gender', prop: 'gender' } ];

4. Add the ngx-datatable component to your template and bind the data and column definitions:

<ngx-datatable class="material" [rows]="rows" [columns]="columns" [columnMode]="ColumnMode.force" [headerHeight]="50" [footerHeight]="50" [rowHeight]="50"> </ngx-datatable>

5. Implement column re-ordering by setting the ColumnMode property to force and providing a reorderable attribute to the columns:

<ngx-datatable ... [columnMode]="ColumnMode.force"> <ngx-datatable-column *ngFor="let column of columns" [name]="column.name" [prop]="column.prop" [reorderable]="true"> </ngx-datatable-column> </ngx-datatable>

6. Implement column customization by providing a columnMenu attribute to the table and setting the menu property on each column:

<ngx-datatable ... [columnMenu]="true"> <ngx-datatable-column ... [menu]="true"> </ngx-datatable-column> </ngx-datatable>

This will allow users to customize the columns by opening a context menu and selecting which columns to display or hide.