feat(table): create table component #137
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedThe pull request is closed. WalkthroughAdds a new Flowbite Angular Table feature (component, head/body/foot directives, themes, DI configs, and state), docs and Storybook demos, a secondary library entry point with packaging and README, updates tooling/templates and tsconfig paths, and adjusts VSCode Tailwind experimental config path. Changes
Sequence Diagram(s)sequenceDiagram
participant App as App Template
participant Table as Table Component
participant Head as TableHead Dir
participant Body as TableBody Dir
participant Foot as TableFoot Dir
participant Cfg as DI Config
participant State as State Tokens
App->>Table: bind tableHead/tableBody/tableFoot/data
Table->>Cfg: injectFlowbiteTableConfig()
Table->>State: provideFlowbiteTableState()
Table->>Head: project header template
Table->>Body: iterate data → project row templates
Table->>Foot: project footer template
Head->>Cfg: injectFlowbiteTableHeadConfig()
Body->>Cfg: injectFlowbiteTableBodyConfig()
Foot->>Cfg: injectFlowbiteTableFootConfig()
Head->>State: provide/inject head state
Body->>State: provide/inject body state
Foot->>State: provide/inject foot state
Table->>App: render with merged themes (color/striped)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Suggested labels
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🔭 Outside diff range comments (1)
libs/tools/src/generators/component/files/component/__directoryName__/src/__fileName__/__fileName__-state.ts.template (1)
1-14: State token is typed to the component class instead of a state shapeTyping the state token as
<%= className %>couples DI state to the component class and will propagate incorrect typings in generated code. Tokens should represent the state shape (e.g.,Flowbite<%= className %>State) to keep DI contracts clean and future-proof.Apply this diff to generate a dedicated state type and correctly type the token and description:
-import type { <%= className %> } from './<%= fileName %>.component'; - import { createState, createStateInjector, createStateProvider, createStateToken, } from 'ng-primitives/state'; -export const Flowbite<%= className %>StateToken = createStateToken<<%= className %>>('Flowbite <%= className %>'); +// Define the shape of the component state. Extend this as needed when implementing the component. +export interface Flowbite<%= className %>State { + // TODO: add properties for component state +} + +export const Flowbite<%= className %>StateToken = + createStateToken<Flowbite<%= className %>State>('Flowbite <%= className %> State'); export const provideFlowbite<%= className %>State = createStateProvider(Flowbite<%= className %>StateToken); export const injectFlowbite<%= className %>State = createStateInjector(Flowbite<%= className %>StateToken); export const flowbite<%= className %>State = createState(Flowbite<%= className %>StateToken);
🧹 Nitpick comments (27)
libs/tools/src/generators/component/files/component/__directoryName__/src/__fileName__/__fileName__-state.ts.template (1)
10-10: Nit: include “State” in the token description for clarityThe human-readable token description currently omits “State”. Including it improves debugging clarity in DI error messages.
If you don’t adopt the full refactor above, at least tweak the description:
-export const Flowbite<%= className %>StateToken = createStateToken<<%= className %>>('Flowbite <%= className %>'); +export const Flowbite<%= className %>StateToken = createStateToken<<%= className %>>('Flowbite <%= className %> State');libs/flowbite-angular/table/src/table/theme.ts (1)
18-48: Reduce duplication for per-color text classesAll colors map to the same light/dark text classes. You can DRY this up for maintainability without losing flexibility.
export const flowbiteTableTheme: FlowbiteTableTheme = createTheme({ host: { base: 'w-full text-left text-sm', - color: { - default: { - light: 'text-gray-500', - dark: 'dark:text-gray-400', - }, - info: { - light: 'text-gray-500', - dark: 'dark:text-gray-400', - }, - failure: { - light: 'text-gray-500', - dark: 'dark:text-gray-400', - }, - success: { - light: 'text-gray-500', - dark: 'dark:text-gray-400', - }, - warning: { - light: 'text-gray-500', - dark: 'dark:text-gray-400', - }, - primary: { - light: 'text-gray-500', - dark: 'dark:text-gray-400', - }, - }, + color: (() => { + const common = { light: 'text-gray-500', dark: 'dark:text-gray-400' } as const; + return { + default: common, + info: common, + failure: common, + success: common, + warning: common, + primary: common, + }; + })(), }, });libs/flowbite-angular/table/src/table-foot/theme.ts (1)
17-41: Reduce duplication in color variants (DRY) and confirm variant intentThe same light/dark classes are repeated for all variants. If the footer is intentionally neutral regardless of variant, consider consolidating to a shared mapping to ease maintenance. If you intend semantic variants (e.g., red for failure), map those accordingly instead of using neutral gray for all.
Add a shared mapping once and reuse it:
// Place near the top of the file (outside the diff range) const sharedTextColor = { light: 'text-gray-900', dark: 'dark:text-white', } as const;Apply this diff to reduce repetition:
export const flowbiteTableFootTheme: FlowbiteTableFootTheme = createTheme({ host: { base: 'font-semibold', color: { - default: { - light: 'text-gray-900', - dark: 'dark:text-white', - }, - info: { - light: 'text-gray-900', - dark: 'dark:text-white', - }, - failure: { - light: 'text-gray-900', - dark: 'dark:text-white', - }, - success: { - light: 'text-gray-900', - dark: 'dark:text-white', - }, - warning: { - light: 'text-gray-900', - dark: 'dark:text-white', - }, - primary: { - light: 'text-gray-900', - dark: 'dark:text-white', - }, + default: sharedTextColor, + info: sharedTextColor, + failure: sharedTextColor, + success: sharedTextColor, + warning: sharedTextColor, + primary: sharedTextColor, }, }, });libs/flowbite-angular/table/src/config/table-config.ts (3)
1-2: Combine duplicate imports from the same moduleImporting from '../table/theme' twice is unnecessary; merge into a single import for clarity.
Apply this diff:
-import type { FlowbiteTableColors } from '../table/theme'; -import { flowbiteTableTheme, type FlowbiteTableTheme } from '../table/theme'; +import { flowbiteTableTheme, type FlowbiteTableTheme, type FlowbiteTableColors } from '../table/theme';
44-49: Shallow merge may discard nested customTheme overrides across providersThe spread merge is shallow. If multiple modules call provideFlowbiteTableConfig (or you want additive updates), nested objects like customTheme will be overwritten instead of merged.
If you need additive merges, switch to a factory provider and deep-merge:
- create a tiny deepMerge utility (or reuse an existing one in the repo if available)
- use useFactory with deps: [FlowbiteTableConfigToken] (optional) to merge with an existing config if present
I can draft a deepMerge helper and provider wiring if you want.
56-57: Guard against accidental mutation of the default configReturning the exported defaultFlowbiteTableConfig by reference allows accidental mutation to affect all consumers. Return a shallow copy (or freeze the default) to reduce risk.
Apply this diff for a minimal safeguard:
-export const injectFlowbiteTableConfig = (): FlowbiteTableConfig => - inject(FlowbiteTableConfigToken, { optional: true }) ?? defaultFlowbiteTableConfig; +export const injectFlowbiteTableConfig = (): FlowbiteTableConfig => { + const cfg = inject(FlowbiteTableConfigToken, { optional: true }) ?? defaultFlowbiteTableConfig; + // Shallow copy to prevent accidental mutation of the shared default object + return { ...cfg, customTheme: { ...cfg.customTheme } }; +};Optionally also freeze the default:
// After defaultFlowbiteTableConfig declaration Object.freeze(defaultFlowbiteTableConfig); Object.freeze(defaultFlowbiteTableConfig.customTheme);apps/docs/docs/components/table/index.md (1)
5-18: Consider adding an accessibility note to the docsA short note on proper table semantics (caption, thead/tbody/tfoot usage, th scope) would help users build accessible tables alongside the new component.
I can draft an A11Y section for this page with example markup if useful.
apps/docs/docs/components/table/_default.component.ts (1)
13-17: Prefer a clearer data initializer and explicit typing
i++inside the Array.from map is unnecessary and confusing. Also, explicit typing helps doc readers.-export class FlowbiteDefaultComponent { - readonly data = Array.from({ length: 5 }, (_, i) => i++).map((x) => ({ - name: `Product ${x}`, - qty: x, - price: x * x, - })); -} +export class FlowbiteDefaultComponent { + readonly data: Array<{ name: string; qty: number; price: number }> = Array.from( + { length: 5 }, + (_, i) => i + ).map((x) => ({ + name: `Product ${x}`, + qty: x, + price: x * x, + })); +}apps/docs/docs/components/table/_default.component.html (3)
30-33: Remove invalidscopeattribute on<td>
scopeis only valid on<th>. Keeping it on<td>is invalid HTML.- <td - scope="row" - class="px-6 py-4"> + <td + class="px-6 py-4">
45-48: Remove invalidscopeattribute in footer<td>as wellSame issue as above;
scopeshould not be used on<td>.- <td - scope="row" - class="px-6 py-4"> + <td + class="px-6 py-4">
50-51: Optional: Compute totals instead of hardcodingFor consistency and to avoid confusion in docs, consider computing totals from
datarather than hardcoding 10 and 30.libs/flowbite-angular/table/src/table-body/table-body.directive.ts (1)
18-21: Minor: Use empty string for presence-only data attributeWhen using data attributes as presence flags, prefer empty string for presence and
nullfor absence. Avoids setting"true"as the value.host: { '[class]': `theme().host.root`, - '[attr.data-striped]': 'tableState().striped() || undefined', + '[attr.data-striped]': `tableState().striped() ? '' : null`, },apps/storybook/src/table.component.stories.ts (2)
70-77: Simplify data generationUse
(_, i) => iinstead ofi++for clarity.args: { color: defaultFlowbiteTableConfig.color, striped: defaultFlowbiteTableConfig.striped, - data: Array.from({ length: 5 }, (_, i) => i++).map((x) => ({ + data: Array.from({ length: 5 }, (_, i) => i).map((x) => ({ name: `Product ${x}`, qty: x, price: x * x, })), customTheme: defaultFlowbiteTableConfig.customTheme, },
81-123: Optional: Remove invalidscopeattribute on<td>in story templateSame HTML validity concern as in the docs component.
- <td scope="row" class="px-6 py-4"> + <td class="px-6 py-4"> {{ data.name }} </td> ... - <td scope="row" class="px-6 py-4"> + <td class="px-6 py-4"> Total </td>libs/flowbite-angular/table/src/table-body/table-body-state.ts (1)
10-13: Add minimal JSDoc for public API clarityThese exports are part of the public surface. Brief JSDoc improves discoverability in IDEs/autocomplete.
+/** Injection token for per-instance TableBody state */ export const FlowbiteTableBodyStateToken = createStateToken<TableBody>('Flowbite TableBody'); +/** Provider for TableBody state; add to the directive's providers */ export const provideFlowbiteTableBodyState = createStateProvider(FlowbiteTableBodyStateToken); +/** Injector helper for TableBody state; use in consumers within the subtree */ export const injectFlowbiteTableBodyState = createStateInjector(FlowbiteTableBodyStateToken); +/** State factory bound to FlowbiteTableBodyStateToken */ export const flowbiteTableBodyState = createState(FlowbiteTableBodyStateToken);libs/flowbite-angular/table/src/table-head/table-head-state.ts (1)
10-13: Consider adding brief JSDoc on the public exportsImproves DX without affecting runtime.
+/** Injection token for per-instance TableHead state */ export const FlowbiteTableHeadStateToken = createStateToken<TableHead>('Flowbite TableHead'); +/** Provider for TableHead state; add to the directive's providers */ export const provideFlowbiteTableHeadState = createStateProvider(FlowbiteTableHeadStateToken); +/** Injector helper for TableHead state */ export const injectFlowbiteTableHeadState = createStateInjector(FlowbiteTableHeadStateToken); +/** State factory bound to FlowbiteTableHeadStateToken */ export const flowbiteTableHeadState = createState(FlowbiteTableHeadStateToken);libs/flowbite-angular/table/src/table-head/theme.ts (1)
14-44: Color variants are comprehensive; consider small consistency tweaks (optional)Two optional polish ideas:
- Align dark-mode text shade consistency across variants (e.g., mostly
-400, butfailure/primaryuse-300). If intentional for contrast, ignore.- Consider adding
tracking-widertohost.baseto match common table header styling in Flowbite examples.If you want, I can propose a follow-up patch aligning the shades and base classes.
libs/flowbite-angular/table/src/table-foot/table-foot-state.ts (1)
10-13: Add brief JSDoc for exported public API (optional)Improves IDE help and documentation generation.
+/** Injection token for per-instance TableFoot state */ export const FlowbiteTableFootStateToken = createStateToken<TableFoot>('Flowbite TableFoot'); +/** Provider for TableFoot state; add to the directive's providers */ export const provideFlowbiteTableFootState = createStateProvider(FlowbiteTableFootStateToken); +/** Injector helper for TableFoot state */ export const injectFlowbiteTableFootState = createStateInjector(FlowbiteTableFootStateToken); +/** State factory bound to FlowbiteTableFootStateToken */ export const flowbiteTableFootState = createState(FlowbiteTableFootStateToken);libs/flowbite-angular/table/src/config/table-head-config.ts (1)
34-41: Consider deep-merging customTheme to preserve nested overridesShallow spreading will replace the entire customTheme object. If consumers provide only a fragment, deep-merge avoids accidentally dropping defaults.
Apply this change:
+import { mergeDeep } from 'flowbite-angular'; @@ export const provideFlowbiteTableHeadConfig = ( config: Partial<FlowbiteTableHeadConfig> ): Provider[] => [ { provide: FlowbiteTableHeadConfigToken, - useValue: { ...defaultFlowbiteTableHeadConfig, ...config }, + useValue: { + baseTheme: config.baseTheme ?? defaultFlowbiteTableHeadConfig.baseTheme, + customTheme: mergeDeep( + defaultFlowbiteTableHeadConfig.customTheme, + config.customTheme ?? {} + ), + }, }, ];libs/flowbite-angular/table/src/config/table-body-config.ts (1)
34-41: Deep-merge customTheme for safer per-key overridesMirrors the head/foot config: deep-merge avoids clobbering unrelated theme keys when consumers supply partial overrides.
Proposed change:
+import { mergeDeep } from 'flowbite-angular'; @@ export const provideFlowbiteTableBodyConfig = ( config: Partial<FlowbiteTableBodyConfig> ): Provider[] => [ { provide: FlowbiteTableBodyConfigToken, - useValue: { ...defaultFlowbiteTableBodyConfig, ...config }, + useValue: { + baseTheme: config.baseTheme ?? defaultFlowbiteTableBodyConfig.baseTheme, + customTheme: mergeDeep( + defaultFlowbiteTableBodyConfig.customTheme, + config.customTheme ?? {} + ), + }, }, ];libs/flowbite-angular/table/src/config/table-foot-config.ts (1)
34-41: Deep-merge customTheme to prevent losing defaultsAlign with head/body: preserve nested keys when a consumer supplies only a subset of customTheme.
Suggested diff:
+import { mergeDeep } from 'flowbite-angular'; @@ export const provideFlowbiteTableFootConfig = ( config: Partial<FlowbiteTableFootConfig> ): Provider[] => [ { provide: FlowbiteTableFootConfigToken, - useValue: { ...defaultFlowbiteTableFootConfig, ...config }, + useValue: { + baseTheme: config.baseTheme ?? defaultFlowbiteTableFootConfig.baseTheme, + customTheme: mergeDeep( + defaultFlowbiteTableFootConfig.customTheme, + config.customTheme ?? {} + ), + }, }, ];libs/flowbite-angular/table/src/table-head/table-head.directive.ts (1)
29-41: Optional: declare state before computed theme to avoid forward-reference pitfallscomputed() is lazy, so this currently works. Declaring state above theme makes the dependency order explicit and future-proof if eager eval ever enters the picture.
libs/flowbite-angular/table/src/table/table.component.ts (4)
28-40: Render thead/tfoot conditionally to avoid empty table sectionsAvoid emitting empty
<thead>/<tfoot>when corresponding templates are absent.Apply:
- <thead> - <ng-container [ngTemplateOutlet]="state.tableHead()" /> - </thead> + @if (state.tableHead()) { + <thead> + <ng-container [ngTemplateOutlet]="state.tableHead()" /> + </thead> + } @@ - <tfoot> - <ng-container [ngTemplateOutlet]="state.tableFoot()" /> - </tfoot> + @if (state.tableFoot()) { + <tfoot> + <ng-container [ngTemplateOutlet]="state.tableFoot()" /> + </tfoot> + }
23-23: Remove empty hostDirectives for brevity
hostDirectives: []is a no-op and can be removed.- hostDirectives: [],
45-84: Consider adding basic tests for state defaults and template wiringSmoke tests that verify: (1) default
datarenders zero rows without error, (2)thead/tfootrender only when templates are supplied, and (3) theme host classes update withcolorwould reduce regressions.I can scaffold minimal TestBed specs for these cases if you want.
48-51: Provide Safe Defaults for Table InputsTo avoid runtime errors when
datais undefined and to make template inputs explicitly nullable, set default values on theinputsignals inlibs/flowbite-angular/table/src/table/table.component.ts:
- Default
datato an empty array so the@forloop never receivesundefined.- Default
tableHead,tableBody, andtableFoottonullfor clearer intent and stronger type safety.Apply this diff:
export class Table { readonly config = injectFlowbiteTableConfig(); - readonly tableHead = input<TemplateRef<unknown>>(); - readonly tableBody = input<TemplateRef<unknown>>(); - readonly data = input<unknown[]>(); - readonly tableFoot = input<TemplateRef<unknown>>(); + readonly tableHead = input<TemplateRef<unknown> | null>(null); + readonly tableBody = input<TemplateRef<unknown> | null>(null); + readonly data = input<unknown[]>([]); + readonly tableFoot = input<TemplateRef<unknown> | null>(null); /** * @see {@link injectFlowbiteTableConfig} */ readonly color = input(this.config.color);libs/flowbite-angular/table/src/table-foot/table-foot.directive.ts (1)
16-16: Drop empty hostDirectives for cleanlinessSame as the Table component, this empty array is a no-op.
- hostDirectives: [],
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (28)
.vscode/settings.json(1 hunks)apps/docs/docs/components/table/_default.component.html(1 hunks)apps/docs/docs/components/table/_default.component.ts(1 hunks)apps/docs/docs/components/table/index.md(1 hunks)apps/docs/docs/components/table/ng-doc.page.ts(1 hunks)apps/docs/docs/ng-doc.api.ts(1 hunks)apps/storybook/src/table.component.stories.ts(1 hunks)libs/flowbite-angular/table/README.md(1 hunks)libs/flowbite-angular/table/ng-package.json(1 hunks)libs/flowbite-angular/table/src/config/table-body-config.ts(1 hunks)libs/flowbite-angular/table/src/config/table-config.ts(1 hunks)libs/flowbite-angular/table/src/config/table-foot-config.ts(1 hunks)libs/flowbite-angular/table/src/config/table-head-config.ts(1 hunks)libs/flowbite-angular/table/src/index.ts(1 hunks)libs/flowbite-angular/table/src/table-body/table-body-state.ts(1 hunks)libs/flowbite-angular/table/src/table-body/table-body.directive.ts(1 hunks)libs/flowbite-angular/table/src/table-body/theme.ts(1 hunks)libs/flowbite-angular/table/src/table-foot/table-foot-state.ts(1 hunks)libs/flowbite-angular/table/src/table-foot/table-foot.directive.ts(1 hunks)libs/flowbite-angular/table/src/table-foot/theme.ts(1 hunks)libs/flowbite-angular/table/src/table-head/table-head-state.ts(1 hunks)libs/flowbite-angular/table/src/table-head/table-head.directive.ts(1 hunks)libs/flowbite-angular/table/src/table-head/theme.ts(1 hunks)libs/flowbite-angular/table/src/table/table-state.ts(1 hunks)libs/flowbite-angular/table/src/table/table.component.ts(1 hunks)libs/flowbite-angular/table/src/table/theme.ts(1 hunks)libs/tools/src/generators/component/files/component/__directoryName__/src/__fileName__/__fileName__-state.ts.template(1 hunks)tsconfig.base.json(1 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: MGREMY
PR: themesberg/flowbite-angular#110
File: apps/docs/docs/components/navbar/directive/_responsive.component.html:4-8
Timestamp: 2025-01-22T14:58:55.257Z
Learning: The `flowbite-navbar-toggle` directive in flowbite-angular:
1. Automatically includes a hamburger menu icon through its internal `flowbite-icon` component
2. Uses a theme-compatible SVG icon that adapts to the current color scheme using `currentColor`
3. Can be used both as a standalone element (`<flowbite-navbar-toggle>`) and as a directive on button elements (`<button flowbite-navbar-toggle>`)
4. Internally handles the click event to toggle the navbar's visibility
Learnt from: MGREMY
PR: themesberg/flowbite-angular#110
File: apps/docs/docs/components/navbar/directive/_responsive.component.html:4-8
Timestamp: 2025-01-22T14:58:55.257Z
Learning: The `flowbite-navbar-toggle` directive in flowbite-angular:
1. Automatically includes a hamburger menu icon through its internal `flowbite-icon` component
2. Can be used both as a standalone element (`<flowbite-navbar-toggle>`) and as a directive on button elements (`<button flowbite-navbar-toggle>`)
3. Internally handles the click event to toggle the navbar's visibility
📚 Learning: 2025-01-22T14:58:55.257Z
Learnt from: MGREMY
PR: themesberg/flowbite-angular#110
File: apps/docs/docs/components/navbar/directive/_responsive.component.html:4-8
Timestamp: 2025-01-22T14:58:55.257Z
Learning: The `flowbite-navbar-toggle` directive in flowbite-angular:
1. Automatically includes a hamburger menu icon through its internal `flowbite-icon` component
2. Can be used both as a standalone element (`<flowbite-navbar-toggle>`) and as a directive on button elements (`<button flowbite-navbar-toggle>`)
3. Internally handles the click event to toggle the navbar's visibility
Applied to files:
libs/flowbite-angular/table/README.md
📚 Learning: 2025-01-22T14:58:55.257Z
Learnt from: MGREMY
PR: themesberg/flowbite-angular#110
File: apps/docs/docs/components/navbar/directive/_responsive.component.html:4-8
Timestamp: 2025-01-22T14:58:55.257Z
Learning: The `flowbite-navbar-toggle` directive in flowbite-angular:
1. Automatically includes a hamburger menu icon through its internal `flowbite-icon` component
2. Uses a theme-compatible SVG icon that adapts to the current color scheme using `currentColor`
3. Can be used both as a standalone element (`<flowbite-navbar-toggle>`) and as a directive on button elements (`<button flowbite-navbar-toggle>`)
4. Internally handles the click event to toggle the navbar's visibility
Applied to files:
libs/flowbite-angular/table/README.md
📚 Learning: 2025-01-07T20:25:20.823Z
Learnt from: MGREMY
PR: themesberg/flowbite-angular#108
File: libs/flowbite-angular/badge/badge.theme.ts:19-22
Timestamp: 2025-01-07T20:25:20.823Z
Learning: In Flowbite Angular, interfaces like `BadgeColors` that extend color types (e.g., `FlowbiteStandardColors`) intentionally include an index signature `[key: string]` to allow users to define their own custom color keys in the configuration.
Applied to files:
libs/flowbite-angular/table/src/table-head/theme.tslibs/flowbite-angular/table/src/table-body/theme.tslibs/flowbite-angular/table/src/table-foot/theme.tslibs/flowbite-angular/table/src/table/theme.ts
📚 Learning: 2024-11-15T08:18:09.828Z
Learnt from: MGREMY
PR: themesberg/flowbite-angular#79
File: libs/flowbite-angular/README.md:87-92
Timestamp: 2024-11-15T08:18:09.828Z
Learning: In `libs/flowbite-angular/README.md`, components that are not yet built should retain their old documentation links and construction emojis until they are completed.
Applied to files:
apps/docs/docs/components/table/_default.component.html
📚 Learning: 2025-01-22T14:56:33.543Z
Learnt from: MGREMY
PR: themesberg/flowbite-angular#110
File: apps/docs/docs/components/navbar/directive/_responsive.component.html:10-14
Timestamp: 2025-01-22T14:56:33.543Z
Learning: The `flowbite-navbar-content` component in flowbite-angular uses `<ul>` as its root element, so `<li>` elements can be placed directly inside it without an additional wrapping `<ul>` element.
Applied to files:
apps/docs/docs/components/table/_default.component.html
🧬 Code Graph Analysis (10)
libs/flowbite-angular/table/src/table-head/theme.ts (1)
libs/flowbite-angular/table/src/table/theme.ts (1)
FlowbiteTableColors(4-7)
libs/flowbite-angular/table/src/config/table-config.ts (1)
libs/flowbite-angular/table/src/table/theme.ts (1)
FlowbiteTableColors(4-7)
apps/docs/docs/components/table/ng-doc.page.ts (1)
libs/flowbite-angular/table/src/table-body/theme.ts (1)
flowbiteTableBodyTheme(14-44)
libs/flowbite-angular/table/src/config/table-body-config.ts (1)
libs/flowbite-angular/table/src/table-body/theme.ts (2)
FlowbiteTableBodyTheme(5-7)flowbiteTableBodyTheme(14-44)
libs/flowbite-angular/table/src/table-body/table-body.directive.ts (4)
libs/flowbite-angular/table/src/table-foot/table-foot.directive.ts (1)
Directive(10-46)libs/flowbite-angular/table/src/table-head/table-head.directive.ts (1)
Directive(10-46)libs/flowbite-angular/table/src/table-body/table-body-state.ts (2)
provideFlowbiteTableBodyState(11-11)flowbiteTableBodyState(13-13)libs/flowbite-angular/table/src/config/table-body-config.ts (1)
injectFlowbiteTableBodyConfig(48-49)
libs/flowbite-angular/table/src/table-body/theme.ts (1)
libs/flowbite-angular/table/src/table/theme.ts (1)
FlowbiteTableColors(4-7)
apps/storybook/src/table.component.stories.ts (1)
libs/flowbite-angular/table/src/config/table-config.ts (1)
defaultFlowbiteTableConfig(28-33)
libs/flowbite-angular/table/src/table-foot/theme.ts (1)
libs/flowbite-angular/table/src/table/theme.ts (1)
FlowbiteTableColors(4-7)
libs/flowbite-angular/table/src/table-head/table-head.directive.ts (2)
libs/flowbite-angular/table/src/table-body/table-body.directive.ts (1)
Directive(10-49)libs/flowbite-angular/table/src/table-foot/table-foot.directive.ts (1)
Directive(10-46)
libs/flowbite-angular/table/src/table-foot/table-foot.directive.ts (1)
libs/flowbite-angular/table/src/table-foot/table-foot-state.ts (2)
provideFlowbiteTableFootState(11-11)flowbiteTableFootState(13-13)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build code 🛠 (20)
🔇 Additional comments (29)
libs/flowbite-angular/table/README.md (1)
1-4: Add a minimal usage snippet for the new secondary entry pointInclude a short “Usage” section in
libs/flowbite-angular/table/README.mdshowing how to import and consume the standalone components/directives you just exported:## Usage ```ts import { Component } from '@angular/core'; import { TableComponent, TableHeadDirective, TableBodyDirective, TableFootDirective } from 'flowbite-angular/table'; @Component({ selector: 'app-root', standalone: true, imports: [ TableComponent, TableHeadDirective, TableBodyDirective, TableFootDirective ], template: ` <fb-table [data]="rows"> <fb-table-head> <!-- header cells --> </fb-table-head> <fb-table-body> <!-- body rows --> </fb-table-body> <fb-table-foot> <!-- footer cells --> </fb-table-foot> </fb-table> ` }) export class AppComponent { rows = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]; }This quick example shows how to import the new secondary‐entry exports and use them in a standalone component. </details> <details> <summary>libs/flowbite-angular/table/ng-package.json (1)</summary> `1-5`: **ng-packagr entry file looks correct** Points the secondary entry point to src/index.ts, which aligns with the barrel/public API pattern. No issues spotted. </details> <details> <summary>libs/flowbite-angular/table/src/table/theme.ts (1)</summary> `4-16`: **Good use of extensible color interface with index signature** Extending `Pick<FlowbiteColors, ...>` and adding `[key: string]: ColorToTheme` matches the established pattern to allow custom colors in config. This is consistent with prior components. </details> <details> <summary>libs/flowbite-angular/table/src/table-foot/theme.ts (1)</summary> `1-12`: **Typed theme and color contract look correct** Using FlowbiteTableColors (with index signature) and a typed createTheme assignment aligns with the library’s extensible theming pattern. </details> <details> <summary>tsconfig.base.json (1)</summary> `91-91`: **Path alias verified for new table entry point** - Confirmed that `libs/flowbite-angular/table/src/index.ts` exists. - Alias `"flowbite-angular/table": ["libs/flowbite-angular/table/src/index.ts"]` is correct and consistent with existing entries. </details> <details> <summary>apps/docs/docs/components/table/index.md (1)</summary> `7-7`: **Demo Key Verification** - Confirmed ‘flowbiteDefaultComponent’ exists in apps/docs/docs/components/table/ng-doc.page.ts (line 23). No changes needed. </details> <details> <summary>apps/docs/docs/ng-doc.api.ts (1)</summary> `34-35`: **LGTM: exposes the Table API to the docs scope** The new include path integrates the table package into the API reference as expected. </details> <details> <summary>apps/docs/docs/components/table/_default.component.ts (1)</summary> `5-11`: **Missing `standalone: true` in component metadata** You’re using the `imports` array which only works for standalone components. Without `standalone: true`, this won’t compile. Apply this diff: ```diff @Component({ - imports: [Table, TableBody, TableFoot, TableHead], + standalone: true, + imports: [Table, TableBody, TableFoot, TableHead], templateUrl: './_default.component.html', host: { class: 'flex flex-wrap flex-row gap-3 p-6', }, })⛔ Skipped due to learnings
Learnt from: MGREMY PR: themesberg/flowbite-angular#100 File: apps/docs/docs/components/badge/_bordered.component.ts:5-12 Timestamp: 2024-12-19T10:29:39.292Z Learning: In Angular 19, the standalone property is the default behavior, making the explicit declaration of "standalone: true" unnecessary.apps/docs/docs/components/table/ng-doc.page.ts (1)
18-35: Docs page wiring looks solidDemos and themes are correctly wired;
toIndentedJsonoutputs are aligned with the theming objects. No issues spotted.libs/flowbite-angular/table/src/table-body/table-body-state.ts (2)
1-1: Good call using a type-only import to avoid circular deps at runtimeUsing
import type { TableBody } ...prevents a runtime cycle with the directive while keeping types intact.
10-13: State token/provider/injector wiring looks correct and consistentThe token name is specific, and the trio
provide*/inject*/createStatepattern aligns with the other table parts and is DI-friendly.libs/flowbite-angular/table/src/table-head/table-head-state.ts (2)
1-1: Type-only import avoids runtime circular dependencySame positive pattern as body/foot/table; safe at runtime while keeping typings.
10-13: Consistent DI/state pattern for TableHeadToken naming and helpers are aligned with the other table parts; good for maintainability.
libs/flowbite-angular/table/src/table/table-state.ts (3)
1-1: Type-only import for Table component is correctPrevents runtime import cycles between state and component.
10-13: State token/provider/injector are set up correctly for the main TableNaming, token scoping, and helper exports are consistent with head/body/foot.
1-14: Integration verified: All checks passed
- The
ng-primitivesdependency is declared in package.json.- Each table directive/component provides and injects its corresponding state helpers.
- The barrel export (
libs/flowbite-angular/table/src/index.ts) includes all state modules and their themes.- The
flowbite-angular/tablepath alias is configured in tsconfig.base.json.libs/flowbite-angular/table/src/table-head/theme.ts (1)
1-12: Theme shape and typings look solid
- The
FlowbiteTableHeadTheme/FlowbiteTableHeadHostThemestructure is clear.FlowbiteTableColors(with index signature per prior components) gives flexibility for custom palette keys.libs/flowbite-angular/table/src/table-foot/table-foot-state.ts (2)
1-1: Type-only import to prevent runtime cycles — goodKeeps the foot directive/state relationship safe.
10-13: Foot state token/provider/injector are correctly definedConsistent with head/body/table; naming and token label are clear.
libs/flowbite-angular/table/src/config/table-head-config.ts (1)
48-49: Good DI fallback patternOptional inject with a sane default keeps the directive usable even without explicit providers.
libs/flowbite-angular/table/src/table-body/theme.ts (1)
14-44: Confirm Tailwind Support fordata-stripedVariantsI didn’t find any Tailwind config files or custom plugin calls enabling
data-striped:odd/data-striped:evenvariants in the repo. Please verify that yourtailwind.config.{js,cjs,ts}includes the necessary setup—either via an arbitrary-variant enablement or a plugin—so that these classes are compiled. Otherwise, the striped-row styles won’t be applied.• No
tailwind.config.*detected at repo root or inlibs/flowbite-angular.
• NoaddVariant('data-striped'…)or similar plugin usage found.Example plugin snippet for reference:
// tailwind.config.js const plugin = require('tailwindcss/plugin'); module.exports = { // … plugins: [ plugin(({ addVariant }) => { addVariant('data-striped-odd', '&[data-striped="odd"]'); addVariant('data-striped-even', '&[data-striped="even"]'); }), // other plugins… ], };libs/flowbite-angular/table/src/config/table-body-config.ts (1)
48-49: Solid defaulting via optional injectConsistent with the rest of the table configs and keeps usage ergonomic.
libs/flowbite-angular/table/src/config/table-foot-config.ts (1)
48-49: Nice: optional injection with defaultKeeps the foot directive functional without extra wiring.
libs/flowbite-angular/table/src/table/table.component.ts (2)
67-78: Theme computation and Tailwind class merging look solidMerging
baseThemewithcustomThemeand then applyingcolorToThemewithtwMergeis clean and consistent with other components.
32-36: Peer dependencies already require Angular ≥17
Thelibs/flowbite-angular/package.jsondeclares
"@angular/core": ">=20.0.0 <21.0.0"
which satisfies the Angular 17+ requirement for the@forcontrol‐flow directive. No changes needed.libs/flowbite-angular/table/src/index.ts (2)
1-27: Barrel exports organization looks goodClear grouping and public API surface for Table, Head, Body, Foot, and configs. This should make the secondary entry point straightforward to consume.
1-27: Exports sanity check passedAll re-export paths in libs/flowbite-angular/table/src/index.ts resolve to actual files—no missing targets found.
libs/flowbite-angular/table/src/table-foot/table-foot.directive.ts (2)
29-40: LGTM: Theme merge + color application mirrors head/bodyMerging
baseThemewith per-footcustomThemeand deriving classes viacolorToThemeensures consistent theming across sections.
21-27: Nice: DI-backed config input for customThemeBinding
customThemeto the config default viainput(this.config.customTheme)aligns with the library pattern.
* feat(table): create table component
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Issue Number
Issue Number: N/A
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Documentation
Chores