feat(table): create table component

.vscode/settings.json

@@ -5,7 +5,7 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "files.eol": "\r\n",
   "editor.formatOnSave": true,
-  "tailwindCSS.experimental.configFile": "libs/flowbite-angular/styles/flowbite-angular.css",
+  "tailwindCSS.experimental.configFile": "apps/docs/public/css/styles.css",
   "tailwindCSS.classAttributes": ["class", "className", "ngClass", "customStyle"],
   "tailwindCSS.classFunctions": ["twMerge", "createTheme"],
   "typescript.tsdk": "node_modules/typescript/lib",

apps/docs/docs/components/table/_default.component.html

@@ -0,0 +1,54 @@
+<table
+  flowbiteTable
+  [tableHead]="tableHeader"
+  [tableBody]="tableBody"
+  [tableFoot]="tableFooter"
+  [data]="data">
+  <ng-template #tableHeader>
+    <tr flowbiteTableHead>
+      <th
+        scope="col"
+        class="rounded-s-lg px-6 py-3">
+        Product name
+      </th>
+      <th
+        scope="col"
+        class="px-6 py-3">
+        Qty
+      </th>
+      <th
+        scope="col"
+        class="rounded-e-lg px-6 py-3">
+        Price
+      </th>
+    </tr>
+  </ng-template>
+  <ng-template
+    #tableBody
+    let-data>
+    <tr flowbiteTableBody>
+      <td
+        scope="row"
+        class="px-6 py-4">
+        {{ data.name }}
+      </td>
+      <td class="px-6 py-4">
+        {{ data.qty }}
+      </td>
+      <td class="px-6 py-4">
+        {{ data.price }}
+      </td>
+    </tr>
+  </ng-template>
+  <ng-template #tableFooter>
+    <tr flowbiteTableFoot>
+      <td
+        scope="row"
+        class="px-6 py-4">
+        Total
+      </td>
+      <td class="px-6 py-4">10</td>
+      <td class="px-6 py-4">30</td>
+    </tr>
+  </ng-template>
+</table>

apps/docs/docs/components/table/_default.component.ts

@@ -0,0 +1,18 @@
+import { Table, TableBody, TableFoot, TableHead } from 'flowbite-angular/table';
+
+import { Component } from '@angular/core';
+
+@Component({
+  imports: [Table, TableBody, TableFoot, TableHead],
+  templateUrl: './_default.component.html',
+  host: {
+    class: 'flex flex-wrap flex-row gap-3 p-6',
+  },
+})
+export class FlowbiteDefaultComponent {
+  readonly data = Array.from({ length: 5 }, (_, i) => i++).map((x) => ({
+    name: `Product ${x}`,
+    qty: x,
+    price: x * x,
+  }));
+}

apps/docs/docs/components/table/index.md

@@ -0,0 +1,18 @@
+---
+keyword: TablePage
+---
+
+## Default Table
+
+{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
+
+```angular-html file="./_default.component.html" group="default" name="html"
+
+```
+
+```angular-ts file="./_default.component.ts" group="default" name="typescript"
+
+```
+
+{% import "../../shared/theme-macro.md" as themeMacro %}
+{{ themeMacro.display(NgDocPage.data.themes) }}

apps/docs/docs/components/table/ng-doc.page.ts

@@ -0,0 +1,35 @@
+import type { DocThemes } from '../../doc-theme.model';
+import { toIndentedJson } from '../../doc-theme.model';
+import ComponentCategory from '../ng-doc.category';
+import { FlowbiteDefaultComponent } from './_default.component';
+
+import {
+  flowbiteTableBodyTheme,
+  flowbiteTableFootTheme,
+  flowbiteTableHeadTheme,
+  flowbiteTableTheme,
+} from 'flowbite-angular/table';
+
+import type { NgDocPage } from '@ng-doc/core';
+
+/**
+ *
+ */
+const Table: NgDocPage = {
+  title: 'Table',
+  mdFile: './index.md',
+  category: ComponentCategory,
+  demos: {
+    flowbiteDefaultComponent: FlowbiteDefaultComponent,
+  },
+  data: {
+    themes: [
+      { title: 'Table', content: toIndentedJson(flowbiteTableTheme) },
+      { title: 'Table Head', content: toIndentedJson(flowbiteTableHeadTheme) },
+      { title: 'Table Body', content: toIndentedJson(flowbiteTableBodyTheme) },
+      { title: 'Table Foot', content: toIndentedJson(flowbiteTableFootTheme) },
+    ] satisfies DocThemes,
+  },
+};
+
+export default Table;

apps/docs/docs/ng-doc.api.ts

@@ -31,6 +31,7 @@ const api: NgDocApi = {
         'libs/flowbite-angular/sidebar/src/index.ts',
         'libs/flowbite-angular/tab/src/index.ts',
         'libs/flowbite-angular/theme-toggle/src/index.ts',
+        'libs/flowbite-angular/table/src/index.ts',
         'libs/flowbite-angular/tooltip/src/index.ts',
       ],
     },

apps/storybook/src/table.component.stories.ts

@@ -0,0 +1,125 @@
+import {
+  defaultFlowbiteTableConfig,
+  Table,
+  TableBody,
+  TableFoot,
+  TableHead,
+} from 'flowbite-angular/table';
+
+import type { Meta, StoryObj } from '@storybook/angular';
+import { argsToTemplate, moduleMetadata } from '@storybook/angular';
+
+type StoryType = Table;
+
+export default {
+  title: 'Component/Table',
+  component: Table,
+  decorators: [
+    moduleMetadata({
+      imports: [TableHead, TableBody, TableFoot],
+    }),
+  ],
+  argTypes: {
+    color: {
+      control: 'select',
+      type: 'string',
+      options: ['default', 'info', 'failure', 'success', 'warning', 'primary'],
+      table: {
+        category: 'Input',
+        defaultValue: {
+          summary: JSON.stringify(defaultFlowbiteTableConfig.color),
+        },
+      },
+    },
+    striped: {
+      control: 'boolean',
+      type: 'boolean',
+      table: {
+        category: 'Input',
+        defaultValue: {
+          summary: JSON.stringify(defaultFlowbiteTableConfig.striped),
+        },
+      },
+    },
+    data: {
+      control: 'object',
+      type: 'symbol',
+      table: {
+        category: 'Input',
+        defaultValue: {
+          summary: JSON.stringify([]),
+        },
+      },
+    },
+    customTheme: {
+      control: 'object',
+      type: 'symbol',
+      table: {
+        category: 'Input',
+        defaultValue: {
+          summary: JSON.stringify(defaultFlowbiteTableConfig.customTheme),
+        },
+      },
+    },
+  },
+} as Meta<StoryType>;
+
+export const Default: StoryObj<StoryType> = {
+  name: 'Default',
+  args: {
+    color: defaultFlowbiteTableConfig.color,
+    striped: defaultFlowbiteTableConfig.striped,
+    data: Array.from({ length: 5 }, (_, i) => i++).map((x) => ({
+      name: `Product ${x}`,
+      qty: x,
+      price: x * x,
+    })),
+    customTheme: defaultFlowbiteTableConfig.customTheme,
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <table flowbiteTable [tableHead]="tableHeader" [tableBody]="tableBody" [tableFoot]="tableFooter" ${argsToTemplate(args)}>
+        <ng-template #tableHeader>
+          <tr flowbiteTableHead>
+            <th scope="col" class="px-6 py-3 rounded-s-lg">
+                Product name
+            </th>
+            <th scope="col" class="px-6 py-3">
+                Qty
+            </th>
+            <th scope="col" class="px-6 py-3 rounded-e-lg">
+                Price
+            </th>
+          </tr>
+        </ng-template>
+        <ng-template #tableBody let-data>
+          <tr flowbiteTableBody>
+            <td scope="row" class="px-6 py-4">
+              {{ data.name }}
+            </td>
+            <td class="px-6 py-4">
+                {{ data.qty }}
+            </td>
+            <td class="px-6 py-4">
+                {{ data.price }}
+            </td>
+          </tr>
+        </ng-template>
+        <ng-template #tableFooter>
+          <tr flowbiteTableFoot>
+            <td scope="row" class="px-6 py-4">
+              Total
+            </td>
+            <td class="px-6 py-4">
+                10
+            </td>
+            <td class="px-6 py-4">
+                30
+            </td>
+          </tr>
+        </ng-template>
+      </table>
+    `,
+  }),
+};

libs/flowbite-angular/table/README.md

@@ -0,0 +1,4 @@
+# flowbite-angular/table
+
+Secondary entry point of `flowbite-angular`. It can be used by importing from
+`flowbite-angular/table`.

libs/flowbite-angular/table/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

libs/flowbite-angular/table/src/config/table-body-config.ts

@@ -0,0 +1,49 @@
+import { flowbiteTableBodyTheme, type FlowbiteTableBodyTheme } from '../table-body/theme';
+
+import type { DeepPartial } from 'flowbite-angular';
+
+import type { Provider } from '@angular/core';
+import { inject, InjectionToken } from '@angular/core';
+
+export interface FlowbiteTableBodyConfig {
+  /**
+   * The default theme of table-body
+   */
+  baseTheme: FlowbiteTableBodyTheme;
+
+  /**
+   * The custom theme of table-body
+   */
+  customTheme: DeepPartial<FlowbiteTableBodyTheme>;
+}
+
+export const defaultFlowbiteTableBodyConfig: FlowbiteTableBodyConfig = {
+  baseTheme: flowbiteTableBodyTheme,
+  customTheme: {},
+};
+
+export const FlowbiteTableBodyConfigToken = new InjectionToken<FlowbiteTableBodyConfig>(
+  'FlowbiteTableBodyConfigToken'
+);
+
+/**
+ * Provide the default TableBody configuration
+ * @param config The TableBody configuration
+ * @returns The provider
+ */
+export const provideFlowbiteTableBodyConfig = (
+  config: Partial<FlowbiteTableBodyConfig>
+): Provider[] => [
+  {
+    provide: FlowbiteTableBodyConfigToken,
+    useValue: { ...defaultFlowbiteTableBodyConfig, ...config },
+  },
+];
+
+/**
+ * Inject the TableBody configuration
+ * @see {@link defaultFlowbiteTableBodyConfig}
+ * @returns The configuration
+ */
+export const injectFlowbiteTableBodyConfig = (): FlowbiteTableBodyConfig =>
+  inject(FlowbiteTableBodyConfigToken, { optional: true }) ?? defaultFlowbiteTableBodyConfig;

libs/flowbite-angular/table/src/config/table-config.ts

@@ -0,0 +1,57 @@
+import type { FlowbiteTableColors } from '../table/theme';
+import { flowbiteTableTheme, type FlowbiteTableTheme } from '../table/theme';
+
+import type { DeepPartial } from 'flowbite-angular';
+
+import type { Provider } from '@angular/core';
+import { inject, InjectionToken } from '@angular/core';
+
+export interface FlowbiteTableConfig {
+  /**
+   * The default theme of table
+   */
+  baseTheme: FlowbiteTableTheme;
+  /**
+   * The default color of table.
+   */
+  color: keyof FlowbiteTableColors;
+  /**
+   * Whether the button is striped.
+   */
+  striped: boolean;
+  /**
+   * The custom theme of table
+   */
+  customTheme: DeepPartial<FlowbiteTableTheme>;
+}
+
+export const defaultFlowbiteTableConfig: FlowbiteTableConfig = {
+  baseTheme: flowbiteTableTheme,
+  color: 'default',
+  striped: false,
+  customTheme: {},
+};
+
+export const FlowbiteTableConfigToken = new InjectionToken<FlowbiteTableConfig>(
+  'FlowbiteTableConfigToken'
+);
+
+/**
+ * Provide the default Table configuration
+ * @param config The Table configuration
+ * @returns The provider
+ */
+export const provideFlowbiteTableConfig = (config: Partial<FlowbiteTableConfig>): Provider[] => [
+  {
+    provide: FlowbiteTableConfigToken,
+    useValue: { ...defaultFlowbiteTableConfig, ...config },
+  },
+];
+
+/**
+ * Inject the Table configuration
+ * @see {@link defaultFlowbiteTableConfig}
+ * @returns The configuration
+ */
+export const injectFlowbiteTableConfig = (): FlowbiteTableConfig =>
+  inject(FlowbiteTableConfigToken, { optional: true }) ?? defaultFlowbiteTableConfig;