- Install {fw.npmPackage}{" "}
- alongside your Angular version ({fw.peerSummary}). The adapter exposes a component you can
- declare in standalone components or NgModules.
-
- {`npm install ${fw.installPackages}`}
-
-
- Import the stylesheet in{" "}
- angular.json{" "}
- global styles, or side-effect import from TypeScript in{" "}
- main.ts /{" "}
- main.server.ts so
- every view sees table styling.
-
- {fw.stylesImport}
-
- - Import the published component symbol and add it to your template with inputs for columns and - row data. Types ship with the package for safer templates and better IDE feedback. -
-
- {fw.minimalSnippet}
-
-
- For standalone bootstrapping, import the component in the{" "}
- imports array of
- the hosting component, wire change detection as usual, and keep heavy work in services if you
- load data asynchronously.
-
- Open the Angular hub for npm metadata, then launch the StackBlitz quick start to validate peers - in a sandbox before integrating into your workspace. -
-+ Pick Simple Table for Angular if you need any of these and you don't want to pay per developer: +
++ Stay on what you have if: +
+columnResizing if users should be able to resize pinned columns.
+
+ ),
+ }}
+ pitfalls={[
+ { title: "Too many pinned columns", problem: "Users pin 8 of 12 columns; the scrolling area becomes useless.", solution: "Cap pinned columns at 2–3 each side, or warn the user beyond a threshold." },
+ { title: "Pinned column width mismatch", problem: "Resizing a pinned column doesn't update the sticky offset.", solution: "Pick a library that handles offset recalculation on resize. Simple Table does this automatically." },
+ { title: "Z-index battles with editors / dropdowns", problem: "Cell editors render below the pinned column, getting clipped.", solution: "Render editors / popovers in a portal at the document root, not inside the cell." },
+ { title: "Mobile horizontal scroll feels broken", problem: "Pinned columns over-fill the viewport on small screens.", solution: "Conditionally disable pinning at < 768px (use @angular/cdk/layout BreakpointObserver)." },
+ ]}
+ faqs={[
+ { question: "Can users reorder pinned columns?", answer: "Yes—Simple Table supports column reordering, including across the pinned/unpinned boundary. Set columnReordering=\"true\"." },
+ { question: "What about pinning rows (not just columns)?", answer: "Row pinning is on the roadmap. Until then, render pinned rows in a separate header / footer slot." },
+ { question: "Does pinning work with virtualization?", answer: "Yes. The pinned columns are rendered separately from the virtualized scroll area; performance is unchanged for 1M rows." },
+ ]}
+ conclusionParagraphs={[
+ "Column pinning in Angular is a single property on Simple Table. AG Grid and PrimeNG support it natively too; mat-table requires manual sticky CSS with z-index management.",
+ "Cap the number of pinned columns and disable pinning on small viewports to keep the scrolling area usable.",
+ ]}
+ relatedLinks={[
+ { href: "/blog/angular-data-grid-simple-table", label: "Pillar guide: best free Angular data grid in 2026" },
+ { href: "/docs/column-pinning", label: "Column pinning documentation" },
+ { href: "/frameworks/angular", label: "Angular integration hub" },
+ ]}
+ ctaTitle="Add column pinning to your Angular grid"
+ ctaDescription="Simple Table for Angular ships left/right pinning, virtualization, and grouping in one MIT package—~70 kB gzipped, signals-native."
+ docsHref="/docs/column-pinning"
+ />
+ );
+}
diff --git a/apps/marketing/src/app/blog/angular-grid-filtering-implementation/page.tsx b/apps/marketing/src/app/blog/angular-grid-filtering-implementation/page.tsx
new file mode 100644
index 000000000..787ef258b
--- /dev/null
+++ b/apps/marketing/src/app/blog/angular-grid-filtering-implementation/page.tsx
@@ -0,0 +1,90 @@
+import type { Metadata } from "next";
+import FrameworkTutorialLayout from "@/components/blog/FrameworkTutorialLayout";
+import { SEO_STRINGS } from "@/constants/strings/seo";
+import { angularGridFilteringPost } from "@/constants/blogPosts";
+
+export const metadata: Metadata = {
+ title: angularGridFilteringPost.title,
+ description: angularGridFilteringPost.description,
+ keywords:
+ "angular grid filtering, angular table column filter, quick filter angular, custom filter predicate angular, ag grid angular filter, primeng filter, simple table angular",
+ openGraph: {
+ title: angularGridFilteringPost.title,
+ description: angularGridFilteringPost.description,
+ type: "article",
+ images: [SEO_STRINGS.site.ogImage],
+ siteName: SEO_STRINGS.site.name,
+ },
+ twitter: {
+ card: "summary_large_image",
+ title: angularGridFilteringPost.title,
+ description: angularGridFilteringPost.description,
+ creator: SEO_STRINGS.site.creator,
+ images: SEO_STRINGS.site.ogImage.url,
+ },
+ alternates: { canonical: `/blog/${angularGridFilteringPost.slug}` },
+};
+
+export default function Page() {
+ return (
+ columnResizing with autoExpandColumns to keep the table flush with the container; remove it to allow horizontal scrolling on small viewports.
+
+ ),
+ }}
+ alternativeSection={{
+ headline: "Implementation: AG Grid Angular",
+ intro: "AG Grid is powerful but the API is verbose and Enterprise features are paywalled. Here's the basic resize setup for comparison.",
+ note: "AG Grid Community covers basic resize, but row grouping, master/detail, and pivoting require AG Grid Enterprise ($999+/dev/year).",
+ }}
+ pitfalls={[
+ { title: "Forgot to set minWidth", problem: "Users shrink columns to 10px, content becomes unreadable.", solution: "Always set minWidth (50–100px for text, 30–50px for numbers/icons)." },
+ { title: "Janky drag on large datasets", problem: "Re-render of 10k rows on every mouse move kills FPS.", solution: "Use a library with built-in virtualization (Simple Table, AG Grid). Avoid hand-rolling resize on plain mat-table." },
+ { title: "Touch events not firing", problem: "Resize works on desktop but not mobile.", solution: "Pick a library that handles touchstart/touchmove (Simple Table does this). If rolling your own, listen for both pointer and touch events." },
+ { title: "Resize handle too narrow", problem: "Users can't grab the 1–2px border.", solution: "Make the interactive hit area 6–10px even if the visual is thinner." },
+ ]}
+ faqs={[
+ { question: "Does Simple Table for Angular support signals?", answer: "Yes—headers and rows accept signals or static values. Resize updates flow through Angular's change detection automatically." },
+ { question: "Can I disable resize per column?", answer: "Yes. Set isResizable: false on individual HeaderObject entries to keep specific columns fixed." },
+ { question: "What about responsive / mobile?", answer: "Disable autoExpandColumns at small viewports and let the grid scroll horizontally. Resize handles still work on touch." },
+ { question: "How does this integrate with sorting and filtering?", answer: "Resizing is independent of sort/filter state. Users can resize while sorted/filtered without losing their position." },
+ ]}
+ conclusionParagraphs={[
+ "Column resizing in Angular is a single input on Simple Table. AG Grid covers it out of the box too, but with verbose config. PrimeNG and ngx-datatable need more wiring; mat-table needs custom directives.",
+ "If you're greenfield on Angular 17+ and want resize, pinning, virtualization, grouping, and editing in one MIT package, Simple Table for Angular is the focused pick.",
+ ]}
+ relatedLinks={[
+ { href: "/blog/angular-data-grid-simple-table", label: "Pillar guide: best free Angular data grid in 2026" },
+ { href: "/docs/column-resizing", label: "Column resizing documentation" },
+ { href: "/frameworks/angular", label: "Angular integration hub" },
+ ]}
+ ctaTitle="Add column resizing to your Angular grid"
+ ctaDescription="Simple Table for Angular ships resize, pinning, grouping, and editing in one MIT package—~70 kB gzipped, signals-native, standalone-component-friendly."
+ docsHref="/docs/column-resizing"
+ />
+ );
+}
diff --git a/apps/marketing/src/app/blog/angular-tree-data-tables/page.tsx b/apps/marketing/src/app/blog/angular-tree-data-tables/page.tsx
new file mode 100644
index 000000000..de8146102
--- /dev/null
+++ b/apps/marketing/src/app/blog/angular-tree-data-tables/page.tsx
@@ -0,0 +1,90 @@
+import type { Metadata } from "next";
+import FrameworkTutorialLayout from "@/components/blog/FrameworkTutorialLayout";
+import { SEO_STRINGS } from "@/constants/strings/seo";
+import { angularTreeDataTablesPost } from "@/constants/blogPosts";
+
+export const metadata: Metadata = {
+ title: angularTreeDataTablesPost.title,
+ description: angularTreeDataTablesPost.description,
+ keywords:
+ "angular tree data table, hierarchical table angular, expand collapse rows angular, primeng treetable, ag grid angular tree data, simple table angular",
+ openGraph: {
+ title: angularTreeDataTablesPost.title,
+ description: angularTreeDataTablesPost.description,
+ type: "article",
+ images: [SEO_STRINGS.site.ogImage],
+ siteName: SEO_STRINGS.site.name,
+ },
+ twitter: {
+ card: "summary_large_image",
+ title: angularTreeDataTablesPost.title,
+ description: angularTreeDataTablesPost.description,
+ creator: SEO_STRINGS.site.creator,
+ images: SEO_STRINGS.site.ogImage.url,
+ },
+ alternates: { canonical: `/blog/${angularTreeDataTablesPost.slug}` },
+};
+
+export default function Page() {
+ return (
+