Skip to main content

Smart Components

Header Content​

A header with common actions and design elements built in.

APP HEADER
SIDEBAR MENU
CONTENT
HEADER CONTENT

When To Use​

HeaderContent can be used to highlight the page's topic, display important information about the page, and carry the action items related to the current page (including page-level operations, inter-page navigation, etc.) It can also be used as inter-page navigation.

Routes : Breadcrumb / Menu / New Page
On Back
Title
Actions Left
Actions Right
Children

Props​

export interface IHeaderContentProps {
    children?: ReactNode;
    title: string;
    routes: Array<BreadcrumbType>;
    onBack?: any;
    actionsRight?: ReactNode;
    actionsLeft?: ReactNode;
}

AppTable​

Props​

It creates a table for data display. It automatically creates a drawer for handling columns settings.

Props​

export interface IAppTableProps {
    type: string;
    data: Array<any> | undefined;
    isLoading?: boolean;
    columns: any[];
    scroll?: {
        x?: number | string;
        y?: number | string;
    };
    pagination?: any;
    setPagination?: any;
    stickyActions?: {
        export?: any;
        // delete?: boolean;
    };
    filter?: boolean;
    onChange?: any;
}

Default Props​

AppTable.defaultProps = {
    stickyActions: {
        export: {
            active: false,
        },
        // delete: false
    },
    filter: true,
    scroll: { x: "100%" },
};

TableFilters​

This is creating automatically when using the AppTable component. It allows to hide or show column table, fix or re-order them.

export interface ITableFilterProps {
    ref: any;
    columnsToFilter: any;
    visibleKeys: Key[];
    fixKeys: Key[];
    onShowChange: Function;
    onSort: Function;
    onFixed: Function;
}

User Settings​

It displays all actions for handling user settings.

ProtectedRoute​

This component is wrapping page with the MainLayout. It checks if the user is connected and if not it redirect the user to the login page.

LanguageSelector​

It creates a selector for language setting.

Switch​

It sets the default setting for a menu, collapsed or not.

ThemeSwitch​

It sets the default setting for theming, dark or light.