Interactive Table Sorting in Angular

This challenge focuses on implementing a sortable table component in Angular. Users should be able to click on table headers to sort the data in ascending or descending order, with visual indicators to show the current sorting direction. This is a common and essential feature in many web applications, enhancing data usability and user experience.

Problem Description

You are tasked with creating a reusable Angular component that displays data in a table format and allows users to sort the data by clicking on the table headers. The component should accept an array of objects as input, where each object represents a row in the table. Each object will have properties corresponding to the table columns.

What needs to be achieved:

Create an Angular component with a table structure.
Dynamically render table headers based on the keys of the first object in the input data array.
Allow users to click on table headers to sort the data.
Implement ascending and descending sorting order.
Visually indicate the currently sorted column and the sorting direction (ascending or descending).
The component should be reusable and accept different data structures without modification.

Key Requirements:

The component must be written in TypeScript.
The component should use Angular's template syntax.
The component should handle empty data arrays gracefully (displaying a message like "No data available").
The sorting logic should be efficient and avoid unnecessary re-renders.
The component should be responsive and adapt to different screen sizes.

Expected Behavior:

Initially, the table should display the data in its original order.
Clicking a header should sort the data by that column in ascending order.
Clicking the same header again should sort the data in descending order.
Clicking a different header should sort the data by that column in ascending order, resetting the sorting for the previous column.
The header of the currently sorted column should have a visual indicator (e.g., an arrow) showing the sorting direction.
If the input data array is empty, a message indicating "No data available" should be displayed.

Edge Cases to Consider:

Empty data array.
Data with missing properties in some objects (handle gracefully, perhaps by displaying an empty cell).
Data with different data types in the same column (e.g., numbers and strings). Consider how to handle sorting in such cases (e.g., string comparison).
Large datasets (performance considerations).

Examples

Example 1:

Input:  data = [{name: "Alice", age: 30, city: "New York"}, {name: "Bob", age: 25, city: "London"}, {name: "Charlie", age: 35, city: "Paris"}]
Output: (Initial Render) Table displaying data in original order. Clicking "Age" header sorts by age ascending. Clicking "Age" again sorts by age descending.
Explanation: The component renders the table with headers "name", "age", and "city".  Clicking "Age" sorts the data by age in ascending order.  Clicking "Age" again reverses the sort order to descending.

Example 2:

Input: data = []
Output:  A message "No data available" is displayed in the table.
Explanation: The component handles the case where the input data array is empty and displays a user-friendly message.

Example 3:

Input: data = [{name: "Alice", age: 30}, {name: "Bob", age: 25}, {name: "Charlie", age: 35, city: "Paris"}]
Output: Table displaying data. The "city" column will have empty cells for the first two rows. Clicking "Age" sorts by age.
Explanation: The component handles objects with missing properties. The "city" column is still rendered, but empty cells are displayed for rows where the "city" property is missing.

Constraints

The component should be able to handle data arrays with up to 1000 objects without significant performance degradation.
The input data array should be an array of objects. Each object should have string or number properties.
The component should be implemented using standard Angular practices and avoid external libraries for sorting.
The visual indicator for the sorting direction should be clear and concise (e.g., an up/down arrow).

Notes

Consider using Angular's trackBy function for improved performance when rendering the table rows.
Think about how to make the component configurable (e.g., allowing users to specify which columns are sortable).
Focus on creating a clean, well-structured, and reusable component.
You can use CSS for styling, but the focus should be on the functionality of the sorting.
The component should be self-contained and not rely on external state management solutions (like NgRx) for this specific task.