feat: add filer and sort in some tables

Signed-off-by: karan-palan <karanpalan007@gmail.com>

Author: Karan-Palan

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

@@ -13,7 +13,7 @@ export function ResponsiveDataTable({ data, columns, options = {}, ...props }) {
       year: 'numeric'
     };
 
-    return new Intl.DateTimeFormat('un-US', dateOptions).format(date);
+    return new Intl.DateTimeFormat('en-US', dateOptions).format(date);
   };
 
   const updatedOptions = {
@@ -37,14 +37,21 @@ export function ResponsiveDataTable({ data, columns, options = {}, ...props }) {
           break;
         }
       }
-    }
+    },
+    filter: true,
+    sort: true,
+    responsive: 'standard',
+    serverSide: false,
   };
 
   useEffect(() => {
     columns?.forEach((col) => {
       if (!col.options) {
         col.options = {};
       }
+
+      col.options.sort = true;
+      col.options.filter = true;
       col.options.display = columnVisibility[col.name];
 
       if (

src/custom/CatalogDesignTable/CatalogDesignTable.tsx

@@ -72,6 +72,8 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
     return columns.map((col) => {
       const newCol = { ...col };
       if (!newCol.options) newCol.options = {};
+      newCol.options.sort = true;
+      newCol.options.filter = true;
       newCol.options.display = columnVisibility[col.name];
       if (
         [
@@ -147,6 +149,8 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
       rowsPerPage: pageSize,
       page,
       elevation: 0,
+      sort: true,
+      filter: true,
       sortOrder: {
         name: sortOrder.split(' ')[0],
         direction: sortOrder.split(' ')[1]

src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

@@ -72,15 +72,17 @@ export const createDesignsColumnsConfig = ({
       name: 'id',
       label: 'ID',
       options: {
-        filter: false,
+        filter: true,
+        sort: true,
+        searchable: true,
         customBodyRender: (value: string) => <ConditionalTooltip value={value} maxLength={10} />
       }
     },
     {
       name: 'name',
       label: 'Name',
       options: {
-        filter: false,
+        filter: true,
         sort: true,
         searchable: true,
         customBodyRender: (value: string, tableMeta: MUIDataTableMeta) => {
@@ -95,7 +97,7 @@ export const createDesignsColumnsConfig = ({
       name: 'first_name',
       label: 'Author',
       options: {
-        filter: false,
+        filter: true,
         sort: true,
         searchable: true,
         customBodyRender: (_, tableMeta: MUIDataTableMeta) => {
@@ -120,7 +122,7 @@ export const createDesignsColumnsConfig = ({
       name: 'created_at',
       label: 'Created At',
       options: {
-        filter: false,
+        filter: true,
         sort: true,
         searchable: true,
         setCellHeaderProps: () => {
@@ -132,7 +134,7 @@ export const createDesignsColumnsConfig = ({
       name: 'updated_at',
       label: 'Updated At',
       options: {
-        filter: false,
+        filter: true,
         sort: true,
         searchable: true,
         setCellHeaderProps: () => {
@@ -144,31 +146,29 @@ export const createDesignsColumnsConfig = ({
       name: 'visibility',
       label: 'Visibility',
       options: {
-        filter: false,
-        sort: false,
+        filter: true,
+        sort: true,
         searchable: true
       }
     },
     {
       name: 'user_id',
       label: 'User ID',
       options: {
-        filter: false,
-        sort: false,
-        searchable: false
+        filter: true,
+        sort: true,
+        searchable: true
       }
     },
-
     {
       name: 'email',
-      label: 'email',
+      label: 'Email',
       options: {
-        filter: false,
-        sort: false,
-        searchable: false
+        filter: true,
+        sort: true,
+        searchable: true
       }
     },
-
     {
       name: 'actions',
       label: 'Actions',