Skip to content

Commit 3aaf641

Browse files
MGREMYMGREMY
authored
feat(table): create table component (#137)
* feat(table): create table component
1 parent 1639131 commit 3aaf641

File tree

28 files changed

+953
-4
lines changed

28 files changed

+953
-4
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"editor.defaultFormatter": "esbenp.prettier-vscode",
66
"files.eol": "\r\n",
77
"editor.formatOnSave": true,
8-
"tailwindCSS.experimental.configFile": "libs/flowbite-angular/styles/flowbite-angular.css",
8+
"tailwindCSS.experimental.configFile": "apps/docs/public/css/styles.css",
99
"tailwindCSS.classAttributes": ["class", "className", "ngClass", "customStyle"],
1010
"tailwindCSS.classFunctions": ["twMerge", "createTheme"],
1111
"typescript.tsdk": "node_modules/typescript/lib",

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<table
2+
flowbiteTable
3+
[tableHead]="tableHeader"
4+
[tableBody]="tableBody"
5+
[tableFoot]="tableFooter"
6+
[data]="data">
7+
<ng-template #tableHeader>
8+
<tr flowbiteTableHead>
9+
<th
10+
scope="col"
11+
class="rounded-s-lg px-6 py-3">
12+
Product name
13+
</th>
14+
<th
15+
scope="col"
16+
class="px-6 py-3">
17+
Qty
18+
</th>
19+
<th
20+
scope="col"
21+
class="rounded-e-lg px-6 py-3">
22+
Price
23+
</th>
24+
</tr>
25+
</ng-template>
26+
<ng-template
27+
#tableBody
28+
let-data>
29+
<tr flowbiteTableBody>
30+
<td
31+
scope="row"
32+
class="px-6 py-4">
33+
{{ data.name }}
34+
</td>
35+
<td class="px-6 py-4">
36+
{{ data.qty }}
37+
</td>
38+
<td class="px-6 py-4">
39+
{{ data.price }}
40+
</td>
41+
</tr>
42+
</ng-template>
43+
<ng-template #tableFooter>
44+
<tr flowbiteTableFoot>
45+
<td
46+
scope="row"
47+
class="px-6 py-4">
48+
Total
49+
</td>
50+
<td class="px-6 py-4">10</td>
51+
<td class="px-6 py-4">30</td>
52+
</tr>
53+
</ng-template>
54+
</table>

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Table, TableBody, TableFoot, TableHead } from 'flowbite-angular/table';
2+
3+
import { Component } from '@angular/core';
4+
5+
@Component({
6+
imports: [Table, TableBody, TableFoot, TableHead],
7+
templateUrl: './_default.component.html',
8+
host: {
9+
class: 'flex flex-wrap flex-row gap-3 p-6',
10+
},
11+
})
12+
export class FlowbiteDefaultComponent {
13+
readonly data = Array.from({ length: 5 }, (_, i) => i++).map((x) => ({
14+
name: `Product ${x}`,
15+
qty: x,
16+
price: x * x,
17+
}));
18+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
keyword: TablePage
3+
---
4+
5+
## Default Table
6+
7+
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
8+
9+
```angular-html file="./_default.component.html" group="default" name="html"
10+
11+
```
12+
13+
```angular-ts file="./_default.component.ts" group="default" name="typescript"
14+
15+
```
16+
17+
{% import "../../shared/theme-macro.md" as themeMacro %}
18+
{{ themeMacro.display(NgDocPage.data.themes) }}

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import type { DocThemes } from '../../doc-theme.model';
2+
import { toIndentedJson } from '../../doc-theme.model';
3+
import ComponentCategory from '../ng-doc.category';
4+
import { FlowbiteDefaultComponent } from './_default.component';
5+
6+
import {
7+
flowbiteTableBodyTheme,
8+
flowbiteTableFootTheme,
9+
flowbiteTableHeadTheme,
10+
flowbiteTableTheme,
11+
} from 'flowbite-angular/table';
12+
13+
import type { NgDocPage } from '@ng-doc/core';
14+
15+
/**
16+
*
17+
*/
18+
const Table: NgDocPage = {
19+
title: 'Table',
20+
mdFile: './index.md',
21+
category: ComponentCategory,
22+
demos: {
23+
flowbiteDefaultComponent: FlowbiteDefaultComponent,
24+
},
25+
data: {
26+
themes: [
27+
{ title: 'Table', content: toIndentedJson(flowbiteTableTheme) },
28+
{ title: 'Table Head', content: toIndentedJson(flowbiteTableHeadTheme) },
29+
{ title: 'Table Body', content: toIndentedJson(flowbiteTableBodyTheme) },
30+
{ title: 'Table Foot', content: toIndentedJson(flowbiteTableFootTheme) },
31+
] satisfies DocThemes,
32+
},
33+
};
34+
35+
export default Table;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const api: NgDocApi = {
3131
'libs/flowbite-angular/sidebar/src/index.ts',
3232
'libs/flowbite-angular/tab/src/index.ts',
3333
'libs/flowbite-angular/theme-toggle/src/index.ts',
34+
'libs/flowbite-angular/table/src/index.ts',
3435
'libs/flowbite-angular/tooltip/src/index.ts',
3536
],
3637
},

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

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import {
2+
defaultFlowbiteTableConfig,
3+
Table,
4+
TableBody,
5+
TableFoot,
6+
TableHead,
7+
} from 'flowbite-angular/table';
8+
9+
import type { Meta, StoryObj } from '@storybook/angular';
10+
import { argsToTemplate, moduleMetadata } from '@storybook/angular';
11+
12+
type StoryType = Table;
13+
14+
export default {
15+
title: 'Component/Table',
16+
component: Table,
17+
decorators: [
18+
moduleMetadata({
19+
imports: [TableHead, TableBody, TableFoot],
20+
}),
21+
],
22+
argTypes: {
23+
color: {
24+
control: 'select',
25+
type: 'string',
26+
options: ['default', 'info', 'failure', 'success', 'warning', 'primary'],
27+
table: {
28+
category: 'Input',
29+
defaultValue: {
30+
summary: JSON.stringify(defaultFlowbiteTableConfig.color),
31+
},
32+
},
33+
},
34+
striped: {
35+
control: 'boolean',
36+
type: 'boolean',
37+
table: {
38+
category: 'Input',
39+
defaultValue: {
40+
summary: JSON.stringify(defaultFlowbiteTableConfig.striped),
41+
},
42+
},
43+
},
44+
data: {
45+
control: 'object',
46+
type: 'symbol',
47+
table: {
48+
category: 'Input',
49+
defaultValue: {
50+
summary: JSON.stringify([]),
51+
},
52+
},
53+
},
54+
customTheme: {
55+
control: 'object',
56+
type: 'symbol',
57+
table: {
58+
category: 'Input',
59+
defaultValue: {
60+
summary: JSON.stringify(defaultFlowbiteTableConfig.customTheme),
61+
},
62+
},
63+
},
64+
},
65+
} as Meta<StoryType>;
66+
67+
export const Default: StoryObj<StoryType> = {
68+
name: 'Default',
69+
args: {
70+
color: defaultFlowbiteTableConfig.color,
71+
striped: defaultFlowbiteTableConfig.striped,
72+
data: Array.from({ length: 5 }, (_, i) => i++).map((x) => ({
73+
name: `Product ${x}`,
74+
qty: x,
75+
price: x * x,
76+
})),
77+
customTheme: defaultFlowbiteTableConfig.customTheme,
78+
},
79+
render: (args) => ({
80+
props: args,
81+
template: `
82+
<table flowbiteTable [tableHead]="tableHeader" [tableBody]="tableBody" [tableFoot]="tableFooter" ${argsToTemplate(args)}>
83+
<ng-template #tableHeader>
84+
<tr flowbiteTableHead>
85+
<th scope="col" class="px-6 py-3 rounded-s-lg">
86+
Product name
87+
</th>
88+
<th scope="col" class="px-6 py-3">
89+
Qty
90+
</th>
91+
<th scope="col" class="px-6 py-3 rounded-e-lg">
92+
Price
93+
</th>
94+
</tr>
95+
</ng-template>
96+
<ng-template #tableBody let-data>
97+
<tr flowbiteTableBody>
98+
<td scope="row" class="px-6 py-4">
99+
{{ data.name }}
100+
</td>
101+
<td class="px-6 py-4">
102+
{{ data.qty }}
103+
</td>
104+
<td class="px-6 py-4">
105+
{{ data.price }}
106+
</td>
107+
</tr>
108+
</ng-template>
109+
<ng-template #tableFooter>
110+
<tr flowbiteTableFoot>
111+
<td scope="row" class="px-6 py-4">
112+
Total
113+
</td>
114+
<td class="px-6 py-4">
115+
10
116+
</td>
117+
<td class="px-6 py-4">
118+
30
119+
</td>
120+
</tr>
121+
</ng-template>
122+
</table>
123+
`,
124+
}),
125+
};

‎libs/flowbite-angular/table/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# flowbite-angular/table
2+
3+
Secondary entry point of `flowbite-angular`. It can be used by importing from
4+
`flowbite-angular/table`.

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"lib": {
3+
"entryFile": "src/index.ts"
4+
}
5+
}

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { flowbiteTableBodyTheme, type FlowbiteTableBodyTheme } from '../table-body/theme';
2+
3+
import type { DeepPartial } from 'flowbite-angular';
4+
5+
import type { Provider } from '@angular/core';
6+
import { inject, InjectionToken } from '@angular/core';
7+
8+
export interface FlowbiteTableBodyConfig {
9+
/**
10+
* The default theme of table-body
11+
*/
12+
baseTheme: FlowbiteTableBodyTheme;
13+
14+
/**
15+
* The custom theme of table-body
16+
*/
17+
customTheme: DeepPartial<FlowbiteTableBodyTheme>;
18+
}
19+
20+
export const defaultFlowbiteTableBodyConfig: FlowbiteTableBodyConfig = {
21+
baseTheme: flowbiteTableBodyTheme,
22+
customTheme: {},
23+
};
24+
25+
export const FlowbiteTableBodyConfigToken = new InjectionToken<FlowbiteTableBodyConfig>(
26+
'FlowbiteTableBodyConfigToken'
27+
);
28+
29+
/**
30+
* Provide the default TableBody configuration
31+
* @param config The TableBody configuration
32+
* @returns The provider
33+
*/
34+
export const provideFlowbiteTableBodyConfig = (
35+
config: Partial<FlowbiteTableBodyConfig>
36+
): Provider[] => [
37+
{
38+
provide: FlowbiteTableBodyConfigToken,
39+
useValue: { ...defaultFlowbiteTableBodyConfig, ...config },
40+
},
41+
];
42+
43+
/**
44+
* Inject the TableBody configuration
45+
* @see {@link defaultFlowbiteTableBodyConfig}
46+
* @returns The configuration
47+
*/
48+
export const injectFlowbiteTableBodyConfig = (): FlowbiteTableBodyConfig =>
49+
inject(FlowbiteTableBodyConfigToken, { optional: true }) ?? defaultFlowbiteTableBodyConfig;

0 commit comments

Comments
 (0)