[ic-data-table]: Resizable columns (click and drag)

### Summary
This new feature will allow users to change column widths by clicking and dragging the column border or an element within the column header left or right to increase or decrease the column width.

### 💬 Description
This feature will allow users to easily increase and decrease the width of a table column. At the moment, it is possible to set a static column width but this functionality cannot be dynamically adjusted by the user. This feature request involves allowing the user to interact with the column border or an element within the column header in order to set the required width. On hover of the resize element, the cursor would change to `cursor: e-resize` or an icon which symobolises that a click and drag movement is required. When the user clicks, holds and then moves the mouse pointer left or right, the column width would increase or decrease. There are a few examples which makes this possible such as:
- Adding a inline style to the `th` element and adjusting the width.
- Setting an inline style onto the `colgroup` element.

Concept: https://stackblitz.com/edit/react-addjys99?file=src%2Fstyle.css

The concept has a button within the column header with a "mousedown" EventListener. Once this event has been invoked, then a eventListener on the document for "mousemove" would do the calculations to adjust the column width. On "mouseup", removeEventListener is called

### 💰 User value
By dynamically adjusting the columns, the user will be able to:
- View the values in full which removes any ambiguity.
- Make it easier to compare data between rows.
- Less effort to view values. No need to hover over each row to see truncated data.

### 📚 User Stories
If relevant, describe the high-level functionality as user stories.

**As a** user
**I need** to be able to click and drag the edge of the column to change its width
**So that** I can see more or less of the content

**As a** user
**I need** to be able to widen truncated data in a table cell
**So that** I do not need to hover over each row to view the data in a tooltip

**As a** user
**I need** to be able to resize the columns using keyboard only
**So that** I can adjust columns without a mouse

**As a** user
**I need** the resize element to be clearly announced by a screen reader
**So that** I can understand the behaviour of the button

**As a** user
**I need** to be able to decrease the size of the column without overlapping the data
**So that** I can clearly read the values

### 📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

**Given** a table with resizable columns
**When** the user hovers over the boundary between two column headers
**Then** the cursor changes to indicate column resizing

**Given** a column resize handle is visible
**When** the user clicks and drags the handle horizontally
**Then** the column width updates in real time

**Given** a column contains truncated text
**When** the user increases the column width
**Then** the full text becomes visible where space allows

**Given** a column has a defined minimum width based on the cell data
**When** the user drags the resize handle smaller than that limit
**Then** the column width does not reduce beyond the minimum

**Given** a column is being resized
**When** the user releases the mouse button
**Then** the final column width is retained

**Given** a keyboard‑only user navigates to a column resize handle
**When** the handle receives focus
**Then** the focus state is clearly visible

**Given** a resize handle has keyboard focus
**When** the user presses the left or right arrow keys
**Then** the column width decreases or increases in defined increments

**Given** a screen reader is in use
**When** a column resize handle receives focus
**Then** the column name and current width are announced

**Given** a column width is adjusted using keyboard input
**When** the width changes
**Then** the updated width is announced to the screen reader

### ✏ Designs
If there's a Figma design file (or other mock-up), include it here.

### 🧾 Guidance
If there's written guidance or documentation, include a link to it here.

### 🚨 Urgency (low, medium or high)
If applicable, tell us how urgent it is that this issue gets resolved, based on the impact it has on your team's work or project timeline.

Medium

### Additional info
Tell us anything else useful to help us understand your suggestion.

Start from the ic-data-table component and review the linked StackBlitz concept, including the th or colgroup sizing approaches and the mousedown, mousemove, and mouseup flow. Confirm how mouse and keyboard resizing, minimum widths, focus visibility, and screen-reader announcements should work; done means the acceptance criteria are met for interactive resizing and accessibility.

Written by the indexing model from the issue text.