Table headers order is not applied to the displayed data

Describe the bug Table headers order is not applied to the displayed data. The table component accepts a headers array but does not use that to display the columns .

To Reproduce Steps to reproduce the behavior:

Run the following code


const testData = [
{ task: 'asdf', priority: 'high' },
{ task: 'jkl;', priority: 'medium' },
]

const headers = ['priority', 'task']

return



**Expected behavior**
I expected the data to be rendered by the matching the headers, i.e., the priority column showing up first followed by the task column

**Screenshots**
![Screenshot from 2024-03-20 18-24-23](https://github.com/rustic-ai/ui-components/assets/930312/e61ffcfa-858d-49dd-a240-ccd343783f65)

**Please complete the following information:**
- OS: [e.g. iOS] Linux
- Browser and version [e.g. chrome version 122.0.6261.111] - Chrome 122.0.6261.128
- Node and NPM Version [e.g. Node v20.11.1 NPM v10.2.4]
- Version of the library [e.g. 0.0.3] - 0.0.4 (also applicable to all the previous versions)
- Version of the ReactJS [e.g. 18.2.0] - 18.2.0
- Version of the MUI Material [e.g. 5.15.7] - 5.15.7
- Version of Typescript [e.g. 5.3.3] - 5.3.3

rustic-ai / ui-components

Table headers order is not applied to the displayed data #38