Advanced Controls

Compose selection, pagination, sorting, search, and layout helpers into one fluent table setup.

Advanced Controls

Compose selection, pagination, sorting, search, and layout helpers into one fluent table setup.

Source: usage.py::build_advanced_controls_code().

selection = dmdt.SelectionConfig(
    selectionTrigger="checkbox",
    selectionColumnClassName="advanced-selection-column",
    selectionColumnStyle={"width": 54},
    selectionCheckboxProps={"radius": "xl", "size": "sm"},
    allRecordsSelectionCheckboxProps={"aria-label": "Select all visible teammates"},
    disabledSelectionRowRules=[
        {"selector": {"status": "Needs Review"}, "value": True},
    ],
    selectionCheckboxRules=[
        {"selector": {"status": "On Track"}, "value": {"color": "green"}},
        {"selector": {"status": "Planning"}, "value": {"color": "blue"}},
        {"selector": {"status": "Needs Review"}, "value": {"color": "orange"}},
    ],
)

pagination = dmdt.PaginationConfig(
    paginationMode="client",
    page=1,
    recordsPerPage=4,
    recordsPerPageOptions=[4, 6],
    paginationSize="sm",
    paginationActiveTextColor="white",
    paginationActiveBackgroundColor="blue",
    loadingText="Loading teammates...",
)

table = (
    dmdt.DataTable(
        id="advanced-controls-table",
        data=EMPLOYEES[:8],
        columns=ADVANCED_CONTROLS_COLUMNS,
        selectedRecordIds=[1, 3],
        sortStatus={"columnAccessor": "name", "direction": "asc"},
    )
    .update_selection(**selection)
    .update_pagination(**pagination)
    .update_sorting(
        sortIcons={
            "sorted": DashIconify(icon="tabler:arrows-sort", width=16),
            "unsorted": DashIconify(icon="tabler:selector", width=16),
        },
    )
    .update_search(
        searchMode="client",
        searchableAccessors=["name", "team", "location", "status"],
    )
    .update_layout(radius="lg", withTableBorder=True, striped=True)
)