# Table, Bro > Pixel-perfect Material data tables for Angular, and more. A Web Components table engine on top of existing UI components: Angular Material, Bootstrap 5 and plain HTML. MIT licensed, version 1.2.0. ## For AI coding agents - Connect the MCP server: `claude mcp add --scope project table-bro -- npx -y @table-bro/mcp@1.2.0`; Cursor, Codex and VS Code take the same command in their MCP settings. - It gives the agent the tools get_started, get_docs and the generation of a table from a spec: a data table in one prompt, for Angular, React, Vue and plain HTML, with the real API instead of a guess. - Docs of the server: [AI: MCP server for AI coding agents | Docs, Bro](https://table-bro.com/docs/ai/mcp-server) - The whole text of Docs in one file: [llms-full.txt](https://table-bro.com/llms-full.txt) ## Docs - [Getting started | Docs, Bro](https://table-bro.com/docs/getting-started): Install Table, Bro and render your first Angular Material data table in three steps: install the packages, add the CSS, register the skin and its elements. - [Basics | Docs, Bro](https://table-bro.com/docs/basics): The basics of Angular Material data tables in Table, Bro: fixed row height, fixed and auto-detected column widths, tooltips, pagination, page size, states. - [Basics: Fixed row height | Docs, Bro](https://table-bro.com/docs/basics/fixed-row-height): Why Table, Bro renders every body row of Angular Material tables at one fixed height, how to set it with a CSS variable, and what it gives to pagination. - [Basics: Fixed column width | Docs, Bro](https://table-bro.com/docs/basics/fixed-column-width): Set a fixed width for a column of Angular Material data tables in Table, Bro, and keep the layout of the table stable across its pages. - [Basics: Auto-detected column width | Docs, Bro](https://table-bro.com/docs/basics/auto-detected-column-width): How Table, Bro measures the content of a column and sets its width automatically, and how to combine auto and fixed widths in Angular Material tables. - [Basics: Truncated text with hover tooltips | Docs, Bro](https://table-bro.com/docs/basics/tooltip): One-line cells with an ellipsis and a tooltip with the full text on hover, for text and tags, in Angular Material data tables of Table, Bro. - [Basics: Animated pagination | Docs, Bro](https://table-bro.com/docs/basics/animated-pagination): Pagination of Angular Material data tables in Table, Bro with animated page changes, for client-side rows and for server-side pages. - [Basics: Animated page size change | Docs, Bro](https://table-bro.com/docs/basics/animated-page-size): Change the page size of Angular Material data tables with an animated transition of the rows, client-side and with server-side data, in Table, Bro. - [Basics: Animated table states | Docs, Bro](https://table-bro.com/docs/basics/table-states): Animated states of Angular Material data tables: loading, no data, no records found and failed, as Lottie animations or icons, in Table, Bro. - [Design | Docs, Bro](https://table-bro.com/docs/design): Design of Angular Material data tables in Table, Bro: CSS styling of the table, custom cell content with Custom Elements, shadows, rounded corners, dark mode. - [Design: Supports CSS styling of ‹table› | Docs, Bro](https://table-bro.com/docs/design/css-styling): Table, Bro renders a real table element, so your CSS for table, thead, tr and td applies as is; the skins add Material or Bootstrap on top. - [Design: Custom content in tables using Custom Elements | Docs, Bro](https://table-bro.com/docs/design/custom-content): Put buttons, menus, badges or any component into the cells of Angular Material tables as Custom Elements, in Angular or any framework, with events. - [Design: Shadows | Docs, Bro](https://table-bro.com/docs/design/shadows): Shadows of Angular Material data tables and of their row details are on by default in Table, Bro; turn them off with one config field. - [Design: Rounded corners | Docs, Bro](https://table-bro.com/docs/design/rounded-corners): Rounded corners of Angular Material tables in Table, Bro: the table, header, paginator and row details, with CSS variables and animated merging. - [Design: Dark/Light mode | Docs, Bro](https://table-bro.com/docs/design/dark-light-mode): Dark and light themes of Angular Material data tables in Table, Bro: follow the color scheme of the system with the theme auto, or force light or dark. - [Design: Material design | Docs, Bro](https://table-bro.com/docs/design/material-design): Table, Bro implements the Material Design data table specs in the Angular Material skin: heights, paddings, type, states, paginator and sorting. - [Design: Bootstrap design | Docs, Bro](https://table-bro.com/docs/design/bootstrap-design): The Bootstrap skin of Table, Bro uses the table classes of Bootstrap 5.3, its pagination and dropdowns, without jQuery and without a plugin. - [Details | Docs, Bro](https://table-bro.com/docs/details): Two ways to show the details of a row in Angular Material tables of Table, Bro: Island Details as expansion panels and default details as a regular row below. - [Details: Island Details | Docs, Bro](https://table-bro.com/docs/details/expansion-panels): Expandable rows of Angular Material tables as expansion panels with animated opening, shadows and rounded corners; details loaded from the server with progress. - [Details: Default Details | Docs, Bro](https://table-bro.com/docs/details/default-details): Expandable row details of Angular Material tables rendered as a regular row below, with animated height, for client-side rows and for server details. - [Filtering and Sorting | Docs, Bro](https://table-bro.com/docs/filtering): Filtering and sorting of Angular Material tables in Table, Bro: a toolbar with search, custom user filters, the Filter Drawer and custom sorting rules. - [Filtering and Sorting: Toolbar with Search | Docs, Bro](https://table-bro.com/docs/filtering/toolbar-with-search): A toolbar above Angular Material tables with a search field, filters and a menu, with the search of client-side rows and of the server, in Table, Bro. - [Filtering and Sorting: Custom user filters | Docs, Bro](https://table-bro.com/docs/filtering/custom-user-filters): Add your own filter controls to Angular Material data tables of Table, Bro and apply them to client-side rows or send them to the server with the page request. - [Filtering and Sorting: Filter Drawer | Docs, Bro](https://table-bro.com/docs/filtering/filter-drawer): A side drawer with the filters of Angular Material data tables, outside the table, opened by any button; in the server mode the filters go into the query. - [Filtering and Sorting: Custom sorting rules | Docs, Bro](https://table-bro.com/docs/filtering/custom-sorting-rules): Sort a column of Angular Material data tables by another field with sortKey: show a formatted date and sort by its timestamp, client-side and server-side. - [AI | Docs, Bro](https://table-bro.com/docs/ai): Table, Bro for AI coding agents: pixel-perfect Material (M3) data tables in one prompt, with an MCP server that generates the setup, the config and the cells. - [Frameworks | Docs, Bro](https://table-bro.com/docs/frameworks): Angular Material data tables of Table, Bro in Angular, Preact, React, Solid, Svelte and Vue: one Custom Element, configure(), the bro-action event and themes. - [Frameworks: Angular data table | Docs, Bro](https://table-bro.com/docs/frameworks/angular): Use Angular Material tables of Table, Bro in Angular: the component table-bro-ng with the signal inputs cols, rows and conf, the action output, themes and SSR. - [Frameworks: Preact data table | Docs, Bro](https://table-bro.com/docs/frameworks/preact): Use Bootstrap 5 tables of Table, Bro in Preact: configure() through a ref, the onbro-action prop, the theme and the JSX types, with a working page. - [Frameworks: React data table | Docs, Bro](https://table-bro.com/docs/frameworks/react): Use Bootstrap 5 tables of Table, Bro in React 19: the Custom Element, configure() through a ref, the bro-action event, the theme prop and StackBlitz. - [Frameworks: Solid data table | Docs, Bro](https://table-bro.com/docs/frameworks/solid): Use Bootstrap 5 tables of Table, Bro in Solid: configure() through a ref, on:bro-action, the theme attribute and the JSX types, with a working page. - [Frameworks: Svelte data table | Docs, Bro](https://table-bro.com/docs/frameworks/svelte): Use Bootstrap 5 tables of Table, Bro in Svelte 5: configure() through bind:this, the onbro-action attribute and the theme, with a working page. - [Frameworks: Vue 3 data table | Docs, Bro](https://table-bro.com/docs/frameworks/vue): Use Bootstrap 5 tables of Table, Bro in Vue 3: isCustomElement of the compiler, configure() through a template ref, @bro-action and the theme binding. - [Server-side rendering | Docs, Bro](https://table-bro.com/docs/ssr): Server-side rendering of Angular Material data tables in Table, Bro: the loading state prerendered in Angular SSR or into a server DOM, without a layout shift. - [Server-side rendering: Prerendering | Docs, Bro](https://table-bro.com/docs/ssr/prerendering): Prerender Angular Material data tables of Table, Bro on a server: table-bro-ng in Angular SSR, prerenderTableBro() for a server DOM, and its limits. - [Accessibility & localization | Docs, Bro](https://table-bro.com/docs/accessibility): Accessibility and localization of Angular Material data tables in Table, Bro: texts in the language of the app, keyboard and focus, names for screen readers. - [Accessibility & localization: Texts and localization | Docs, Bro](https://table-bro.com/docs/accessibility/localization): Translate Angular Material data tables of Table, Bro: config.texts by the part of the table with their defaults, a German locale, the paginator and the tags. - [Accessibility & localization: Keyboard and focus | Docs, Bro](https://table-bro.com/docs/accessibility/keyboard-and-focus): Keyboard use of Angular Material data tables in Table, Bro: the Tab order of the toolbar, headers, rows and paginator, focus rings, Space, Enter and Escape. - [Accessibility & localization: Screen readers | Docs, Bro](https://table-bro.com/docs/accessibility/screen-readers): Angular Material data tables of Table, Bro for screen readers: one table with column headers, roles and names of the toolbar, the live region and labels. ## Site - [Table, Bro](https://table-bro.com/): Pixel-perfect Material (M3) data tables for your app in one prompt, with an MCP server for Claude Code, Cursor and Codex. Angular, React, Vue, HTML. MIT. - [Table, Bro + Vanilla Bootstrap](https://table-bro.com/bootstrap): Pixel-perfect Material (M3) data tables, and the same tables in Bootstrap 5 without jQuery, for your app in one prompt with an MCP server. MIT. - [Table, Bro + Vanilla HTML](https://table-bro.com/html): Pixel-perfect Material (M3) data tables, and the same tables in plain HTML with your own CSS, for your app in one prompt with an MCP server. MIT. - [Docs, Bro](https://table-bro.com/docs): Setup, features and configuration of Angular Material data tables in Table, Bro: pagination, sorting, search, row details, filters, themes, dark mode. - [Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs): Setup, features and configuration of Bootstrap 5 data tables in Table, Bro: pagination, sorting, search, row details, filters, themes, dark mode. - [Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs): Setup, features and configuration of HTML data tables in Table, Bro: pagination, sorting, search, row details, filters, themes, dark mode. - [Getting started | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/getting-started): Install Table, Bro and render your first Bootstrap 5 data table in three steps: install the packages, add the CSS, register the skin and its elements. - [Getting started | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/getting-started): Install Table, Bro and render your first HTML data table in three steps: install the packages, add the CSS, register the skin and its elements. - [Basics | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/basics): The basics of Bootstrap 5 data tables in Table, Bro: fixed row height, fixed and auto-detected column widths, tooltips, pagination, page size, states. - [Basics | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/basics): The basics of HTML data tables in Table, Bro: fixed row height, fixed and auto-detected column widths, tooltips, pagination, page size, states. - [Basics: Fixed row height | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/basics/fixed-row-height): Why Table, Bro renders every body row of Bootstrap 5 tables at one fixed height, how to set it with a CSS variable, and what it gives to pagination. - [Basics: Fixed row height | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/basics/fixed-row-height): Why Table, Bro renders every body row of HTML tables at one fixed height, how to set it with a CSS variable, and what it gives to pagination. - [Basics: Fixed column width | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/basics/fixed-column-width): Set a fixed width for a column of Bootstrap 5 data tables in Table, Bro, and keep the layout of the table stable across its pages. - [Basics: Fixed column width | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/basics/fixed-column-width): Set a fixed width for a column of HTML data tables in Table, Bro, and keep the layout of the table stable across its pages. - [Basics: Auto-detected column width | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/basics/auto-detected-column-width): How Table, Bro measures the content of a column and sets its width automatically, and how to combine auto and fixed widths in Bootstrap 5 tables. - [Basics: Auto-detected column width | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/basics/auto-detected-column-width): How Table, Bro measures the content of a column and sets its width automatically, and how to combine auto and fixed widths in HTML tables. - [Basics: Truncated text with hover tooltips | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/basics/tooltip): One-line cells with an ellipsis and a tooltip with the full text on hover, for text and tags, in Bootstrap 5 data tables of Table, Bro. - [Basics: Truncated text with hover tooltips | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/basics/tooltip): One-line cells with an ellipsis and a tooltip with the full text on hover, for text and tags, in HTML data tables of Table, Bro. - [Basics: Animated pagination | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/basics/animated-pagination): Pagination of Bootstrap 5 data tables in Table, Bro with animated page changes, for client-side rows and for server-side pages. - [Basics: Animated pagination | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/basics/animated-pagination): Pagination of HTML data tables in Table, Bro with animated page changes, for client-side rows and for server-side pages. - [Basics: Animated page size change | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/basics/animated-page-size): Change the page size of Bootstrap 5 data tables with an animated transition of the rows, client-side and with server-side data, in Table, Bro. - [Basics: Animated page size change | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/basics/animated-page-size): Change the page size of HTML data tables with an animated transition of the rows, client-side and with server-side data, in Table, Bro. - [Basics: Animated table states | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/basics/table-states): Animated states of Bootstrap 5 data tables: loading, no data, no records found and failed, as Lottie animations or icons, in Table, Bro. - [Basics: Animated table states | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/basics/table-states): Animated states of HTML data tables: loading, no data, no records found and failed, as Lottie animations or icons, in Table, Bro. - [Design | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/design): Design of Bootstrap 5 data tables in Table, Bro: CSS styling of the table, custom cell content with Custom Elements, shadows, rounded corners, dark mode. - [Design | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/design): Design of HTML data tables in Table, Bro: CSS styling of the table, custom cell content with Custom Elements, shadows, rounded corners, dark mode. - [Design: Custom content in tables using Custom Elements | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/design/custom-content): Put buttons, menus, badges or any component into the cells of Bootstrap 5 tables as Custom Elements, in Angular or any framework, with events. - [Design: Custom content in tables using Custom Elements | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/design/custom-content): Put buttons, menus, badges or any component into the cells of HTML tables as Custom Elements, in Angular or any framework, with events. - [Design: Shadows | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/design/shadows): Shadows of Bootstrap 5 data tables and of their row details are on by default in Table, Bro; turn them off with one config field. - [Design: Shadows | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/design/shadows): Shadows of HTML data tables and of their row details are on by default in Table, Bro; turn them off with one config field. - [Design: Rounded corners | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/design/rounded-corners): Rounded corners of Bootstrap 5 tables in Table, Bro: the table, header, paginator and row details, with CSS variables and animated merging. - [Design: Rounded corners | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/design/rounded-corners): Rounded corners of HTML tables in Table, Bro: the table, header, paginator and row details, with CSS variables and animated merging. - [Design: Dark/Light mode | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/design/dark-light-mode): Dark and light themes of Bootstrap 5 data tables in Table, Bro: follow the color scheme of the system with the theme auto, or force light or dark. - [Design: Dark/Light mode | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/design/dark-light-mode): Dark and light themes of HTML data tables in Table, Bro: follow the color scheme of the system with the theme auto, or force light or dark. - [Details | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/details): Two ways to show the details of a row in Bootstrap 5 tables of Table, Bro: Island Details as expansion panels and default details as a regular row below. - [Details | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/details): Two ways to show the details of a row in HTML tables of Table, Bro: Island Details as expansion panels and default details as a regular row below. - [Details: Island Details | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/details/expansion-panels): Expandable rows of Bootstrap 5 tables as expansion panels with animated opening, shadows and rounded corners; details loaded from the server with progress. - [Details: Island Details | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/details/expansion-panels): Expandable rows of HTML tables as expansion panels with animated opening, shadows and rounded corners; details loaded from the server with progress. - [Details: Default Details | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/details/default-details): Expandable row details of Bootstrap 5 tables rendered as a regular row below, with animated height, for client-side rows and for server details. - [Details: Default Details | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/details/default-details): Expandable row details of HTML tables rendered as a regular row below, with animated height, for client-side rows and for server details. - [Filtering and Sorting | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/filtering): Filtering and sorting of Bootstrap 5 tables in Table, Bro: a toolbar with search, custom user filters, the Filter Drawer and custom sorting rules. - [Filtering and Sorting | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/filtering): Filtering and sorting of HTML tables in Table, Bro: a toolbar with search, custom user filters, the Filter Drawer and custom sorting rules. - [Filtering and Sorting: Toolbar with Search | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/filtering/toolbar-with-search): A toolbar above Bootstrap 5 tables with a search field, filters and a menu, with the search of client-side rows and of the server, in Table, Bro. - [Filtering and Sorting: Toolbar with Search | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/filtering/toolbar-with-search): A toolbar above HTML tables with a search field, filters and a menu, with the search of client-side rows and of the server, in Table, Bro. - [Filtering and Sorting: Custom user filters | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/filtering/custom-user-filters): Add your own filter controls to Bootstrap 5 data tables of Table, Bro and apply them to client-side rows or send them to the server with the page request. - [Filtering and Sorting: Custom user filters | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/filtering/custom-user-filters): Add your own filter controls to HTML data tables of Table, Bro and apply them to client-side rows or send them to the server with the page request. - [Filtering and Sorting: Filter Drawer | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/filtering/filter-drawer): A side drawer with the filters of Bootstrap 5 data tables, outside the table, opened by any button; in the server mode the filters go into the query. - [Filtering and Sorting: Filter Drawer | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/filtering/filter-drawer): A side drawer with the filters of HTML data tables, outside the table, opened by any button; in the server mode the filters go into the query. - [Filtering and Sorting: Custom sorting rules | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/filtering/custom-sorting-rules): Sort a column of Bootstrap 5 data tables by another field with sortKey: show a formatted date and sort by its timestamp, client-side and server-side. - [Filtering and Sorting: Custom sorting rules | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/filtering/custom-sorting-rules): Sort a column of HTML data tables by another field with sortKey: show a formatted date and sort by its timestamp, client-side and server-side. - [Frameworks | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/frameworks): Bootstrap 5 data tables of Table, Bro in Angular, Preact, React, Solid, Svelte and Vue: one Custom Element, configure(), the bro-action event and themes. - [Frameworks | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/frameworks): HTML data tables of Table, Bro in Angular, Preact, React, Solid, Svelte and Vue: one Custom Element, configure(), the bro-action event and themes. - [Frameworks: Angular data table | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/frameworks/angular): Use Bootstrap 5 tables of Table, Bro in Angular: the component table-bro-ng with the signal inputs cols, rows and conf, the action output, themes and SSR. - [Frameworks: Angular data table | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/frameworks/angular): Use HTML tables of Table, Bro in Angular: the component table-bro-ng with the signal inputs cols, rows and conf, the action output, themes and SSR. - [Frameworks: Preact data table | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/frameworks/preact): Use HTML tables of Table, Bro in Preact: configure() through a ref, the onbro-action prop, the theme and the JSX types, with a working page. - [Frameworks: React data table | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/frameworks/react): Use HTML tables of Table, Bro in React 19: the Custom Element, configure() through a ref, the bro-action event, the theme prop and StackBlitz. - [Frameworks: Solid data table | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/frameworks/solid): Use HTML tables of Table, Bro in Solid: configure() through a ref, on:bro-action, the theme attribute and the JSX types, with a working page. - [Frameworks: Svelte data table | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/frameworks/svelte): Use HTML tables of Table, Bro in Svelte 5: configure() through bind:this, the onbro-action attribute and the theme, with a working page. - [Frameworks: Vue 3 data table | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/frameworks/vue): Use HTML tables of Table, Bro in Vue 3: isCustomElement of the compiler, configure() through a template ref, @bro-action and the theme binding. - [Server-side rendering | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/ssr): Server-side rendering of Bootstrap 5 data tables in Table, Bro: the loading state prerendered in Angular SSR or into a server DOM, without a layout shift. - [Server-side rendering | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/ssr): Server-side rendering of HTML data tables in Table, Bro: the loading state prerendered in Angular SSR or into a server DOM, without a layout shift. - [Server-side rendering: Prerendering | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/ssr/prerendering): Prerender Bootstrap 5 data tables of Table, Bro on a server: table-bro-ng in Angular SSR, prerenderTableBro() for a server DOM, and its limits. - [Server-side rendering: Prerendering | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/ssr/prerendering): Prerender HTML data tables of Table, Bro on a server: table-bro-ng in Angular SSR, prerenderTableBro() for a server DOM, and its limits. - [Accessibility & localization | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/accessibility): Accessibility and localization of Bootstrap 5 data tables in Table, Bro: texts in the language of the app, keyboard and focus, names for screen readers. - [Accessibility & localization | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/accessibility): Accessibility and localization of HTML data tables in Table, Bro: texts in the language of the app, keyboard and focus, names for screen readers. - [Accessibility & localization: Texts and localization | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/accessibility/localization): Translate Bootstrap 5 data tables of Table, Bro: config.texts by the part of the table with their defaults, a German locale, the paginator and the tags. - [Accessibility & localization: Texts and localization | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/accessibility/localization): Translate HTML data tables of Table, Bro: config.texts by the part of the table with their defaults, a German locale, the paginator and the tags. - [Accessibility & localization: Keyboard and focus | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/accessibility/keyboard-and-focus): Keyboard use of Bootstrap 5 data tables in Table, Bro: the Tab order of the toolbar, headers, rows and paginator, focus rings, Space, Enter and Escape. - [Accessibility & localization: Keyboard and focus | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/accessibility/keyboard-and-focus): Keyboard use of HTML data tables in Table, Bro: the Tab order of the toolbar, headers, rows and paginator, focus rings, Space, Enter and Escape. - [Accessibility & localization: Screen readers | Vanilla Bootstrap | Docs, Bro](https://table-bro.com/bootstrap/docs/accessibility/screen-readers): Bootstrap 5 data tables of Table, Bro for screen readers: one table with column headers, roles and names of the toolbar, the live region and labels. - [Accessibility & localization: Screen readers | Vanilla HTML | Docs, Bro](https://table-bro.com/html/docs/accessibility/screen-readers): HTML data tables of Table, Bro for screen readers: one table with column headers, roles and names of the toolbar, the live region and labels. - [Examples, Bro](https://table-bro.com/examples): Four Angular Material data tables built by an AI agent with the Table, Bro MCP server: nested tables in row details, server CRUD, two-line cells, filters. - [Vanilla Bootstrap | Examples, Bro](https://table-bro.com/bootstrap/examples): Four Bootstrap 5 data tables built by an AI agent with the Table, Bro MCP server: nested tables in row details, server CRUD, two-line cells, filters. - [Vanilla HTML | Examples, Bro](https://table-bro.com/html/examples): Four HTML data tables built by an AI agent with the Table, Bro MCP server: nested tables in row details, server CRUD, two-line cells, filters. - [Table, Bro Architecture](https://table-bro.com/architecture): A Web Components table engine on top of existing UI components. One element creates a controller that runs every change of the table in fixed phases. ## Links - [GitHub](https://github.com/table-bro/table-bro): the source, the issues and the changelog - [npm](https://www.npmjs.com/org/table-bro): @table-bro/core, @table-bro/angular, @table-bro/mcp and the skins