implement new table variant

packages/js/src/dashboard/components/dashboard.js

@@ -1,5 +1,6 @@
 import { Scores } from "../scores/components/scores";
 import { PageTitle } from "./page-title";
+import { DashboardTable } from "./dashboard-table";
 
 /**
  * @type {import("../index").ContentType} ContentType
@@ -18,10 +19,27 @@ import { PageTitle } from "./page-title";
  * @returns {JSX.Element} The element.
  */
 export const Dashboard = ( { contentTypes, userName, features, endpoints, headers, links } ) => {
+	const columns = [
+		{ name: "landing-page", label: "Landing page" },
+		{ name: "clicks", label: "Clicks", sortable: true },
+		{ name: "impressions", label: "Impressions" },
+		{ name: "ctr", label: "CTR" },
+		{ name: "average-position", label: "Average position" },
+		{ name: "seo-score", label: "SEO score", className: "yst-flex yst-justify-end yst-text-center" },
+	];
+
+	const data = [
+		[ "https://example.com1", 10, 1001, 10, 1, "good" ],
+		[ "https://example.com2", 90, 1002, 9, 3, "bad" ],
+		[ "https://example.com3", 50, 1003, 8, 5, "good" ],
+		[ "https://example.com4", 0, 1004, 7, 2, "ok" ],
+		[ "https://example.com5", 70, 1005, 6, 4, "ok" ],
+	];
 	return (
 		<>
 			<PageTitle userName={ userName } features={ features } links={ links } />
 			<div className="yst-flex yst-flex-col @7xl:yst-flex-row yst-gap-6 yst-my-6">
+				<DashboardTable title="Test Table" columns={ columns } data={ data } />
 				{ features.indexables && features.seoAnalysis && (
 					<Scores analysisType="seo" contentTypes={ contentTypes } endpoint={ endpoints.seoScores } headers={ headers } />
 				) }