Skip to content

FormsTable Component

Description

The FormsTable component is a fully featured table system designed for complex enterprise applications. It provides:

  • Editable rows with validation
  • Dynamic context menus
  • Column visibility toggles
  • Filtering, sorting, and searching
  • Batch selection and clipboard integration
  • Exporting, importing, and inline editing

Props

Prop Type Default Description
componentProperties ComponentProperties - Configuration object defining table structure, filters, and behavior.
displayMode LYComponentDisplayMode "component" Determines how the table is displayed.
viewGrid boolean true Enables or disables the table grid view.
viewMode LYComponentViewMode "table" Defines the layout mode (tree, list, grid, etc.).
onSelectRow (row: ITableRow) => void undefined Callback when a row is selected.
readonly boolean false If true, disables row editing.

Example Usage

Using Static Data

FormsTable can be used with static configuration as shown below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import { FormsTable } from '@nomana-it/liberty-core';
import { LYComponentDisplayMode, LYComponentViewMode } from '@nomana-it/liberty-core';

export const FormsTableExample = () => {
return (
    <FormsTable
    componentProperties={{
        id: 1,
        label: "User Data",
        filters: [],
        componentMode: "edit",
    }}
    displayMode={LYComponentDisplayMode.component}
    viewGrid={true}
    viewMode={LYComponentViewMode.table}
    readonly={false}
    />
);
};

Using Data from a Provider

The FormsTable component can also dynamically receive data from a provider.

Example Data Provider

1
2
3
4
5
6
7
export async function getTableProperties() {
    return tableProperties;
}

export async function getTableData() {
    return tableData;
}

Integrating with AppProvider

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<AppProvider
getModules={getModules}
getApplications={getApplications}
getToken={getToken}
getUser={getUser}
getMenus={getMenus}
getDashboard={getDashboard}
getTables={{
    getProperties: getTableProperties,
    getData: getTableData
}}
>

This ensures that the FormsTable dynamically receives its configuration and data.

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core