You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-`sortable`: Defaults to all columns being sortable (`headers.map(() => true)`)
89
94
-`ariaLabel`: Same as `tableTitle` if provided
90
95
-`emptyStateMessage`: `'No data available'`
91
96
-`className`: `'expandable-data-table-item'`
97
+
-`rowClassNames`: `[]`
98
+
99
+
## Sorting Configuration
100
+
101
+
The ExpandableDataTable component provides built-in sorting functionality that can be configured using the `sortable` prop. This prop allows you to specify which columns should be sortable and which should not.
102
+
103
+
### Default Sorting Behavior
104
+
105
+
By default, all columns in the table are sortable. This means users can click on any column header to sort the table by that column in ascending or descending order.
106
+
107
+
```tsx
108
+
// All columns are sortable by default
109
+
<ExpandableDataTable
110
+
tableTitle="Sample Table"
111
+
rows={data}
112
+
headers={headers}
113
+
renderCell={renderCell}
114
+
renderExpandedContent={renderExpandedContent}
115
+
/>
116
+
```
117
+
118
+
### Configuring Sortable Columns
119
+
120
+
You can customize which columns are sortable by providing a `sortable` array. This array should contain boolean values that map to each header in the `headers` array.
121
+
122
+
```tsx
123
+
const headers = [
124
+
{ key: "name", header: "Name" },
125
+
{ key: "status", header: "Status" },
126
+
{ key: "date", header: "Date" },
127
+
];
128
+
129
+
// Only the Name and Date columns will be sortable
130
+
const sortable = [true, false, true];
131
+
132
+
<ExpandableDataTable
133
+
tableTitle="Sample Table"
134
+
rows={data}
135
+
headers={headers}
136
+
sortable={sortable}
137
+
renderCell={renderCell}
138
+
renderExpandedContent={renderExpandedContent}
139
+
/>;
140
+
```
141
+
142
+
### Handling Edge Cases
143
+
144
+
The component handles various edge cases gracefully:
145
+
146
+
1.**Shorter sortable array**: If the `sortable` array is shorter than the `headers` array, the remaining columns will default to not being sortable.
147
+
148
+
```tsx
149
+
// Only the Name column will be sortable, Status and Date will not be sortable
150
+
const sortable = [true];
151
+
```
152
+
153
+
2.**Longer sortable array**: If the `sortable` array is longer than the `headers` array, the extra values will be ignored.
154
+
155
+
```tsx
156
+
// Only the first three values will be used, extra values are ignored
157
+
const sortable = [true, false, true, true, true];
158
+
```
159
+
160
+
3.**Empty sortable array**: If an empty array is provided, no columns will be sortable.
161
+
162
+
```tsx
163
+
// No columns will be sortable
164
+
const sortable = [];
165
+
```
166
+
167
+
4.**Non-boolean values**: Non-boolean values in the `sortable` array will be coerced to boolean.
168
+
169
+
```tsx
170
+
// Values will be coerced to boolean (truthy/falsy)
0 commit comments