TSV Viewer View tab-separated value data as a formatted, sortable table.

Underneath its interface, it relies on React hooks to manage state and optimize performance. The `useState` hook stores user input as a string in the component's state, while `useMemo` recalculates the rows and data when this input changes. This ensures that only necessary computations are performed, reducing unnecessary re-renders of the table. When parsing TSV data, it splits each line by newline characters (`\n`) and then further divides them into individual cells using tab characters (`\t`). The absence of quoting or escaping conventions in TSV simplifies this process compared to CSV.

The sorting functionality is implemented through a combination of JavaScript's `localeCompare` method for string comparison and numeric subtraction for numerical data. When the user clicks on a column header, it invokes the `handleSort` function, which updates the sort order based on whether the same column was previously sorted or not. This logic ensures that columns can be toggled between ascending and descending order seamlessly. It also automatically detects if a value is numeric by attempting to convert it to a number using `Number()`, allowing for correct numerical sorting even when mixed with string data.

The table structure itself utilizes standard HTML elements like `<table>`, `<thead>`, and `<tbody>` for organization, while React's rendering capabilities dynamically populate the rows based on the parsed TSV data. The use of specific class names in the JSX, such as `glass-input` and `text-sm font-medium mb-2 block`, indicates that CSS is used to control styling and layout, ensuring a visually appealing and user-friendly interface for viewing tab-separated values.