Skip to content

Commit 6c2ab92

Browse files
committed
Add advanced grid in core documentation
1 parent 70baf0b commit 6c2ab92

File tree

2 files changed

+92
-0
lines changed

2 files changed

+92
-0
lines changed
Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# FormsTable Component
2+
3+
## Description
4+
The `FormsTable` component is a **fully featured table system** designed for complex **enterprise applications**. It provides:
5+
6+
- **Editable rows with validation**
7+
- **Dynamic context menus**
8+
- **Column visibility toggles**
9+
- **Filtering, sorting, and searching**
10+
- **Batch selection and clipboard integration**
11+
- **Exporting, importing, and inline editing**
12+
13+
## Props
14+
| Prop | Type | Default | Description |
15+
|-----------------|-------------------|----------|-----------------------------------------------|
16+
| `componentProperties` | `ComponentProperties` | `-` | Configuration object defining table structure, filters, and behavior. |
17+
| `displayMode` | `LYComponentDisplayMode` | `"component"` | Determines how the table is displayed. |
18+
| `viewGrid` | `boolean` | `true` | Enables or disables the table grid view. |
19+
| `viewMode` | `LYComponentViewMode` | `"table"` | Defines the layout mode (tree, list, grid, etc.). |
20+
| `onSelectRow` | `(row: ITableRow) => void` | `undefined` | Callback when a row is selected. |
21+
| `readonly` | `boolean` | `false` | If true, disables row editing. |
22+
23+
## Example Usage
24+
25+
### Using Static Data
26+
27+
`FormsTable` can be used with static configuration as shown below:
28+
29+
```tsx
30+
import { FormsTable } from '@nomana-it/liberty-core';
31+
import { LYComponentDisplayMode, LYComponentViewMode } from '@nomana-it/liberty-core';
32+
33+
export const FormsTableExample = () => {
34+
return (
35+
<FormsTable
36+
componentProperties={{
37+
id: 1,
38+
label: "User Data",
39+
filters: [],
40+
componentMode: "edit",
41+
}}
42+
displayMode={LYComponentDisplayMode.component}
43+
viewGrid={true}
44+
viewMode={LYComponentViewMode.table}
45+
readonly={false}
46+
/>
47+
);
48+
};
49+
```
50+
51+
### Using Data from a Provider
52+
53+
The `FormsTable` component can also dynamically receive data from a provider.
54+
55+
#### Example Data Provider
56+
57+
```tsx
58+
export async function getTableProperties() {
59+
return tableProperties;
60+
}
61+
62+
export async function getTableData() {
63+
return tableData;
64+
}
65+
```
66+
67+
#### Integrating with `AppProvider`
68+
69+
```tsx
70+
<AppProvider
71+
getModules={getModules}
72+
getApplications={getApplications}
73+
getToken={getToken}
74+
getUser={getUser}
75+
getMenus={getMenus}
76+
getDashboard={getDashboard}
77+
getTables={{
78+
getProperties: getTableProperties,
79+
getData: getTableData
80+
}}
81+
>
82+
```
83+
84+
This ensures that the `FormsTable` dynamically receives its configuration and data.
85+
86+
87+
## Useful Links
88+
πŸ”— **GitHub Repository (Core):** [Liberty Core](https://github.com/fblettner/liberty-core/)
89+
πŸ”— **GitHub Repository (Test Project):** [Liberty Test](https://github.com/fblettner/liberty-test/)
90+
πŸ“– **Live Documentation:** [Liberty Core Docs](https://docs.nomana-it.fr/liberty-core/)
91+
πŸ’– **Sponsor & Support:** [Sponsor Liberty Core](https://github.com/sponsors/fblettner)

β€Žmkdocs.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ nav:
110110
- Users: liberty/core/components/main-components/users.md
111111
- Forms Components:
112112
- Dashboard: liberty/core/components/forms-components/dashboard.md
113+
- Advanced Grid: liberty/core/components/forms-components/advanced-grid.md
113114

114115
- API Documentation: liberty/api/liberty-api.md
115116
- Release Notes: liberty/release-notes.md

0 commit comments

Comments
Β (0)