Table Menu

The Widget Table Menu consists of a pagination component, a modal component for sorting and a modal for filtering. These components sit in the footer of the Base Widget.

An example of the 'Sort' modal

The table menu can be added to any table widget by passing that table's request object through the useRequestTable hook, for example:

const tableRequest = useRequestTable({
    groupBy: fields.FIELD,
    orderBy: [{ field: fields.FIELD, orderByDirection: 'desc' }],
    fields: [
        // This array represents the table columns
        fields.FIELD,
        fields.FIELD,
        fields.FIELD,
    ],
});

We need to add a list of fields to the request object so that the menu is aware of which columns are present in the table.

All the logic for the filters and pagination is handled inside the useRequestTable hook. We can now pass this tableRequest to the useResource and useResourceTable hooks as usual:

const myTableResource = useResource({
    resource: resources.RESOURCE,
    request: tableRequest,
});

const myTable = useResourceTable({
    resourceData: myTableResource,
});

For the menu to appear in the widget, we need to add it as a prop for the Table Widget:

components: () => {
    return {
        a: (
            <WidgetTable
                title={'Widget Title'}
                data={myTable}
                menu={<WidgetMenuTable data={myTable} />}
            />,
        )
    };
};