Skip to content

Commit a84ed7d

Browse files
amitamrutiyaamitamrutiya
authored
Merge pull request #916 from Karan-Palan/feat/all-columns-tables-sortable-filterable
feat: add filter and sort in all tables
2 parents b652f90 + d0265b2 commit a84ed7d

10 files changed

Lines changed: 114 additions & 86 deletions

File tree

‎examples/next-12/components/ResponsiveDataTable/ResponsiveDataTable.jsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function ResponsiveDataTable({ data, columns, options = {}, ...props }) {
1313
year: 'numeric'
1414
};
1515

16-
return new Intl.DateTimeFormat('un-US', dateOptions).format(date);
16+
return new Intl.DateTimeFormat('en-US', dateOptions).format(date);
1717
};
1818

1919
const updatedOptions = {
@@ -37,14 +37,21 @@ export function ResponsiveDataTable({ data, columns, options = {}, ...props }) {
3737
break;
3838
}
3939
}
40-
}
40+
},
41+
filter: true,
42+
sort: true,
43+
responsive: 'standard',
44+
serverSide: false,
4145
};
4246

4347
useEffect(() => {
4448
columns?.forEach((col) => {
4549
if (!col.options) {
4650
col.options = {};
4751
}
52+
53+
col.options.sort = true;
54+
col.options.filter = true;
4855
col.options.display = columnVisibility[col.name];
4956

5057
if (

‎src/custom/CatalogDesignTable/CatalogDesignTable.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,8 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
7272
return columns.map((col) => {
7373
const newCol = { ...col };
7474
if (!newCol.options) newCol.options = {};
75+
newCol.options.sort = true;
76+
newCol.options.filter = true;
7577
newCol.options.display = columnVisibility[col.name];
7678
if (
7779
[
@@ -147,6 +149,8 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
147149
rowsPerPage: pageSize,
148150
page,
149151
elevation: 0,
152+
sort: true,
153+
filter: true,
150154
sortOrder: {
151155
name: sortOrder.split(' ')[0],
152156
direction: sortOrder.split(' ')[1]

‎src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -72,15 +72,17 @@ export const createDesignsColumnsConfig = ({
7272
name: 'id',
7373
label: 'ID',
7474
options: {
75-
filter: false,
75+
filter: true,
76+
sort: true,
77+
searchable: true,
7678
customBodyRender: (value: string) => <ConditionalTooltip value={value} maxLength={10} />
7779
}
7880
},
7981
{
8082
name: 'name',
8183
label: 'Name',
8284
options: {
83-
filter: false,
85+
filter: true,
8486
sort: true,
8587
searchable: true,
8688
customBodyRender: (value: string, tableMeta: MUIDataTableMeta) => {
@@ -95,7 +97,7 @@ export const createDesignsColumnsConfig = ({
9597
name: 'first_name',
9698
label: 'Author',
9799
options: {
98-
filter: false,
100+
filter: true,
99101
sort: true,
100102
searchable: true,
101103
customBodyRender: (_, tableMeta: MUIDataTableMeta) => {
@@ -120,7 +122,7 @@ export const createDesignsColumnsConfig = ({
120122
name: 'created_at',
121123
label: 'Created At',
122124
options: {
123-
filter: false,
125+
filter: true,
124126
sort: true,
125127
searchable: true,
126128
setCellHeaderProps: () => {
@@ -132,7 +134,7 @@ export const createDesignsColumnsConfig = ({
132134
name: 'updated_at',
133135
label: 'Updated At',
134136
options: {
135-
filter: false,
137+
filter: true,
136138
sort: true,
137139
searchable: true,
138140
setCellHeaderProps: () => {
@@ -144,38 +146,36 @@ export const createDesignsColumnsConfig = ({
144146
name: 'visibility',
145147
label: 'Visibility',
146148
options: {
147-
filter: false,
148-
sort: false,
149+
filter: true,
150+
sort: true,
149151
searchable: true
150152
}
151153
},
152154
{
153155
name: 'user_id',
154156
label: 'User ID',
155157
options: {
156-
filter: false,
157-
sort: false,
158-
searchable: false
158+
filter: true,
159+
sort: true,
160+
searchable: true
159161
}
160162
},
161-
162163
{
163164
name: 'email',
164-
label: 'email',
165+
label: 'Email',
165166
options: {
166-
filter: false,
167-
sort: false,
168-
searchable: false
167+
filter: true,
168+
sort: true,
169+
searchable: true
169170
}
170171
},
171-
172172
{
173173
name: 'actions',
174174
label: 'Actions',
175175
options: {
176-
filter: false,
177-
sort: false,
178-
searchable: false,
176+
filter: true,
177+
sort: true,
178+
searchable: true,
179179
setCellHeaderProps: () => ({ align: 'center' as const }),
180180
setCellProps: () => ({ align: 'center' as const }),
181181
customBodyRender: function CustomBody(_, tableMeta: MUIDataTableMeta) {

‎src/custom/CatalogDesignTable/columnConfig.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -86,15 +86,15 @@ export const createDesignColumns = ({
8686
name: 'id',
8787
label: 'ID',
8888
options: {
89-
filter: false,
89+
filter: true,
9090
customBodyRender: (value: string) => <ConditionalTooltip value={value} maxLength={10} />
9191
}
9292
},
9393
{
9494
name: 'name',
9595
label: 'Name',
9696
options: {
97-
filter: false,
97+
filter: true,
9898
sort: true,
9999
searchable: true,
100100
customBodyRender: (value: string, tableMeta: MUIDataTableMeta) => {
@@ -122,7 +122,7 @@ export const createDesignColumns = ({
122122
name: 'first_name',
123123
label: 'Author',
124124
options: {
125-
filter: false,
125+
filter: true,
126126
sort: true,
127127
searchable: true,
128128
customBodyRender: (_: string, tableMeta: MUIDataTableMeta) => {
@@ -154,7 +154,7 @@ export const createDesignColumns = ({
154154
name: 'created_at',
155155
label: 'Created At',
156156
options: {
157-
filter: false,
157+
filter: true,
158158
sort: true,
159159
searchable: true
160160
}
@@ -163,7 +163,7 @@ export const createDesignColumns = ({
163163
name: 'updated_at',
164164
label: 'Updated At',
165165
options: {
166-
filter: false,
166+
filter: true,
167167
sort: true,
168168
searchable: true
169169
}
@@ -173,7 +173,7 @@ export const createDesignColumns = ({
173173
label: 'Type',
174174
options: {
175175
filter: true,
176-
sort: false,
176+
sort: true,
177177
searchable: true
178178
}
179179
},
@@ -182,56 +182,56 @@ export const createDesignColumns = ({
182182
label: 'Class',
183183
options: {
184184
filter: true,
185-
sort: false,
185+
sort: true,
186186
searchable: true
187187
}
188188
},
189189
{
190190
name: 'view_count',
191191
label: 'Opens',
192192
options: {
193-
filter: false,
193+
filter: true,
194194
sort: true
195195
}
196196
},
197197
{
198198
name: 'download_count',
199199
label: 'Downloads',
200200
options: {
201-
filter: false,
201+
filter: true,
202202
sort: true
203203
}
204204
},
205205
{
206206
name: 'clone_count',
207207
label: 'Clones',
208208
options: {
209-
filter: false,
209+
filter: true,
210210
sort: true
211211
}
212212
},
213213
{
214214
name: 'deployment_count',
215215
label: 'Deploys',
216216
options: {
217-
filter: false,
217+
filter: true,
218218
sort: true
219219
}
220220
},
221221
{
222222
name: 'share_count',
223223
label: 'Shares',
224224
options: {
225-
filter: false,
225+
filter: true,
226226
sort: true
227227
}
228228
},
229229
{
230230
name: 'actions',
231231
label: 'Actions',
232232
options: {
233-
filter: false,
234-
sort: false,
233+
filter: true,
234+
sort: true,
235235
searchable: false,
236236
setCellHeaderProps: () => ({ align: 'center' }),
237237
setCellProps: () => ({ align: 'center' }),

‎src/custom/ResponsiveDataTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,7 @@ const ResponsiveDataTable = ({
311311
print: false,
312312
download: false,
313313
search: false,
314-
filter: false,
314+
filter: true,
315315
viewColumns: false,
316316
rowsPerPageOptions: rowsPerPageOptions,
317317
onViewColumnsChange: (column: string, action: string) => {

‎src/custom/TeamTable/TeamTable.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,14 @@ const TeamTable: React.FC<TeamTableProps> = ({
4646
useRemoveUserFromTeamMutation
4747
}) => {
4848
const theme = useTheme();
49+
columns.forEach((col) => {
50+
if (!col.options) {
51+
col.options = {};
52+
}
53+
col.options.sort = true;
54+
col.options.filter = true;
55+
col.options.display = columnVisibility[col.name] ?? true;
56+
});
4957
return (
5058
<ErrorBoundary>
5159
<ResponsiveDataTable

‎src/custom/TeamTable/TeamTableConfiguration.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -122,8 +122,8 @@ export default function TeamTableConfiguration({
122122
name: 'id',
123123
label: 'ID',
124124
options: {
125-
filter: false,
126-
sort: false,
125+
filter: true,
126+
sort: true,
127127
searchable: false,
128128
customBodyRender: (value: string) => <FormatId id={value} />
129129
}
@@ -132,7 +132,7 @@ export default function TeamTableConfiguration({
132132
name: 'name',
133133
label: 'Name',
134134
options: {
135-
filter: false,
135+
filter: true,
136136
sort: true,
137137
searchable: true
138138
}
@@ -141,17 +141,17 @@ export default function TeamTableConfiguration({
141141
name: 'description',
142142
label: 'Description',
143143
options: {
144-
filter: false,
144+
filter: true,
145145
sort: true,
146-
searchable: false,
146+
searchable: true,
147147
customBodyRender: (value: string) => <ConditionalTooltip value={value} maxLength={30} />
148148
}
149149
},
150150
{
151151
name: 'owner',
152152
label: 'Owner',
153153
options: {
154-
filter: false,
154+
filter: true,
155155
sort: true,
156156
searchable: true
157157
}
@@ -160,7 +160,7 @@ export default function TeamTableConfiguration({
160160
name: 'created_at',
161161
label: 'Created At',
162162
options: {
163-
filter: false,
163+
filter: true,
164164
sort: true,
165165
searchable: false,
166166
sortDescFirst: true
@@ -170,7 +170,7 @@ export default function TeamTableConfiguration({
170170
name: 'updated_at',
171171
label: 'Updated At',
172172
options: {
173-
filter: false,
173+
filter: true,
174174
sort: true,
175175
searchable: false,
176176
sortDescFirst: true
@@ -200,8 +200,8 @@ export default function TeamTableConfiguration({
200200
name: 'actions',
201201
label: 'Actions',
202202
options: {
203-
filter: false,
204-
sort: false,
203+
filter: true,
204+
sort: true,
205205
searchable: false,
206206
customBodyRender: (_: string, tableMeta: MUIDataTableMeta) => {
207207
if (bulkSelect || tableMeta.rowData[4].Valid) {
@@ -282,7 +282,7 @@ export default function TeamTableConfiguration({
282282
const ExpandedRowIdx = teams?.findIndex((team) => team.id === teamId);
283283

284284
const options = {
285-
filter: false,
285+
filter: true,
286286
selectableRows: 'none' as const,
287287
filterType: 'dropdown' as const,
288288
expandableRows: true,
@@ -404,7 +404,11 @@ export default function TeamTableConfiguration({
404404

405405
return {
406406
columns,
407-
tableOptions: options,
407+
tableOptions: {
408+
...options,
409+
filter: true,
410+
sort: true
411+
},
408412
tableCols,
409413
updateCols,
410414
columnVisibility,

0 commit comments

Comments
 (0)