Aller au contenu principal

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​

PropTypeDefaultDescription
componentPropertiesComponentProperties-Configuration object defining table structure, filters, and behavior.
displayModeLYComponentDisplayMode"component"Determines how the table is displayed.
viewGridbooleantrueEnables or disables the table grid view.
viewModeLYComponentViewMode"table"Defines the layout mode (tree, list, grid, etc.).
onSelectRow(row: ITableRow) => voidundefinedCallback when a row is selected.
readonlybooleanfalseIf true, disables row editing.

Example Usage​

Using Static Data​

FormsTable can be used with static configuration as shown below:

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​

export async function getTableProperties() {
    return tableProperties;
}

export async function getTableData() {
    return tableData;
}

Integrating with AppProvider​

<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