Custom Components

Use Dash components for custom loaders and no-records states.

Custom Components

Use Dash components for custom loaders and no-records states.

Source: usage.py::build_custom_components_code().

loading_table = (
    dmdt.DataTable(
        id="custom-loader-table",
        data=EMPLOYEES[:4],
        columns=STATES_DEMO_COLUMNS,
        fetching=True,
        customLoader=dmc.Stack(
            [
                DashIconify(icon="tabler:refresh", width=22),
                dmc.Text("Syncing employee records", size="sm"),
            ],
            align="center",
            gap=6,
        ),
        paginationMode="none",
    )
    .update_layout(
        radius="lg",
        withTableBorder=True,
        bd="1px solid var(--mantine-color-blue-2)",
        bdrs="lg",
        minHeight=220,
    )
)

empty_table = (
    dmdt.DataTable(
        id="no-records-icon-table",
        data=[],
        columns=STATES_DEMO_COLUMNS,
        noRecordsText="No employees are waiting for review.",
        noRecordsIcon=DashIconify(icon="tabler:clipboard-off", width=28),
        paginationMode="none",
    )
    .update_layout(
        radius="lg",
        withTableBorder=True,
        bd="1px dashed var(--mantine-color-gray-4)",
        bdrs="lg",
        minHeight=220,
    )
)