diff --git a/src/components/Creatives/CreativeList.tsx b/src/components/Creatives/CreativeList.tsx
index 1ec083786..650c265f9 100644
--- a/src/components/Creatives/CreativeList.tsx
+++ b/src/components/Creatives/CreativeList.tsx
@@ -10,15 +10,9 @@ import MiniSideBar from "components/Drawer/MiniSideBar";
import { Box, Link, List, Typography } from "@mui/material";
import { Status } from "components/Campaigns/Status";
import { Link as RouterLink } from "react-router-dom";
-import {
- DataGrid,
- GridColDef,
- GridToolbarColumnsButton,
- GridToolbarContainer,
- GridToolbarFilterButton,
- GridToolbarQuickFilter,
-} from "@mui/x-data-grid";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
import { CreativeStatusSwitch } from "components/Creatives/CreativeStatusSwitch";
+import { CustomToolbar } from "components/Datagrid/CustomToolbar";
const ALLOWED_TYPES = ["notification_all_v1", "inline_content_all_v1"];
export function CreativeList() {
@@ -81,17 +75,6 @@ export function CreativeList() {
},
];
- function CustomToolbar() {
- return (
-
-
-
-
-
-
- );
- }
-
const creatives = [...(data?.advertiser?.creatives ?? [])].filter((c) =>
ALLOWED_TYPES.includes(c.type.code),
);
@@ -107,32 +90,34 @@ export function CreativeList() {
header="Creatives"
sx={{
flexGrow: 1,
- mr: 2,
- width: "100%",
+ overflowX: "auto",
+ mr: 1,
}}
>
-
+
+ pagination: {
+ paginationModel: {
+ pageSize: 10,
+ },
+ },
+ }}
+ />
+
);
diff --git a/src/components/Datagrid/CustomToolbar.tsx b/src/components/Datagrid/CustomToolbar.tsx
new file mode 100644
index 000000000..c50fc5f14
--- /dev/null
+++ b/src/components/Datagrid/CustomToolbar.tsx
@@ -0,0 +1,18 @@
+import {
+ GridToolbarColumnsButton,
+ GridToolbarContainer,
+ GridToolbarFilterButton,
+ GridToolbarQuickFilter,
+} from "@mui/x-data-grid";
+import { Box } from "@mui/material";
+
+export function CustomToolbar() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/src/user/User.tsx b/src/user/User.tsx
index d6adea0ed..38bf05c23 100644
--- a/src/user/User.tsx
+++ b/src/user/User.tsx
@@ -51,77 +51,76 @@ export function User() {
setFromDate,
}}
>
-
-
-
-
-
- {/* /adsmanager */}
-
- a.selfServiceManageCampaign
- }
- />
-
-
- a.selfServiceManageCampaign
- }
- />
-
-
- a.selfServiceManageCampaign
- }
- />
-
-
-
- {/* /campaigns/:campaignId/analytics - */}
-
-
-
-
-
-
-
-
-
-
-
-
- {/* default */}
-
-
-
+
+
+
+
+ {/* /adsmanager */}
+ a.selfServiceManageCampaign}
+ />
+
+ a.selfServiceManageCampaign}
+ />
+
+ a.selfServiceManageCampaign}
+ />
+
+
+
+ {/* /campaigns/:campaignId/analytics - */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* default */}
+
+
diff --git a/src/user/campaignList/CampaignList.tsx b/src/user/campaignList/CampaignList.tsx
index 668aa60a9..403e718f5 100644
--- a/src/user/campaignList/CampaignList.tsx
+++ b/src/user/campaignList/CampaignList.tsx
@@ -1,9 +1,5 @@
import { useState } from "react";
-import {
- ColumnDescriptor,
- EnhancedTable,
- StandardRenderers,
-} from "components/EnhancedTable";
+import { EnhancedTable, StandardRenderers } from "components/EnhancedTable";
import { Checkbox, Link } from "@mui/material";
import {
campaignOnOffState,
@@ -22,6 +18,7 @@ import {
import _ from "lodash";
import { uiTextForCampaignFormat } from "user/library";
import { CampaignSummaryFragment } from "graphql/campaign.generated";
+import { GridColDef } from "@mui/x-data-grid";
interface Props {
advertiser?: AdvertiserCampaignsFragment | null;
@@ -52,36 +49,39 @@ export function CampaignList({
},
});
- const columns: ColumnDescriptor[] = [
+ const columns: GridColDef[] = [
{
- title: "Campaign",
- value: (c) => c.name,
- extendedRenderer: (r) => (
+ field: "name",
+ headerName: "Campaign",
+ renderCell: ({ row }) => (
- {r.name}
+ {row.name}
),
},
{
- title: "Format",
- value: (c) => uiTextForCampaignFormat(c.format),
+ field: "format",
+ headerName: "Format",
+ valueGetter: ({ row }) => uiTextForCampaignFormat(row.format),
},
{
- title: "Status",
- value: (c) => (isAfterEndDate(c.endAt) ? "completed" : c.state),
- extendedRenderer: (r) => (
-
+ field: "state",
+ headerName: "Status",
+ valueGetter: ({ row }) =>
+ isAfterEndDate(row.endAt) ? "completed" : row.state,
+ renderCell: ({ row }) => (
+
),
- sx: { width: "1px", p: 0 },
+ width: 1,
},
{
- title: "Budget",
- value: (c) => c.budget,
- extendedRenderer: (r) => renderMonetaryAmount(r.budget, r.currency),
+ field: "budget",
+ headerName: "Budget",
+ renderCell: ({ row }) => renderMonetaryAmount(row.budget, row.currency),
align: "right",
},
{
@@ -132,7 +132,6 @@ export function CampaignList({
{
title: "",
value: (c) => c.id,
- sortable: false,
extendedRenderer: (r) => (