Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://icflorescu.github.io/mantine-datatable/examples/using-with-mantine-contextmenu below:

Examples › Using with Mantine ContextMenu

Mantine doesn’t have a context-menu component, but the DataTable works perfectly with Mantine ContextMenu, built by the same author. Have a look at the examples below to learn how.

Important

When using

, you’ll need to wrap your application in a

and include the necessary CSS files

. Please refer to the

page of

Mantine ContextMenu

for more information.

When using

Mantine ContextMenu

with a scrollable

Mantine DataTable

, you’ll need to close the context-menu when the user scrolls the table –

.

Here’s how you could use the onRowContextMenu property to create this useful functionality for your data-rich desktop applications:

Here’s the code for the example above:

By default, a Mantine ContextMenu will automatically place an overlay over the entire page and close when the user clicks it, hits the Escape key, scrolls the or resizes the browser window. However, when using a scrollable DataTable, the user can still scroll the table using the arrow keys, so you might need to close the context-menu when the user scrolls the table by passing the hideContextMenu function returned by the useContextMenu hook to the onScroll property of the DataTable:

Here’s the code for the example above:

You can also use the onCellContextMenu property to create a context-menu for individual cells. In the example below, we’re showing a context-menu for the name column:

Here’s the code for the example above:

You can also mix row and cell context-menus. In the example below, we’re showing a context-menu for the name column and a different one for the row:

Here’s the code for the example above:

Usually, context-menus are shown when the user right-clicks on a user interface element. However, you can also show a context-menu when the user left-clicks on a row or cell by using the onRowClick and onCellClick properties instead of onRowContextMenu and onCellContextMenu. Here’s an example:

Here’s the code for the example above:

You can use context-menus inside modals. In the example below, we’re showing a context-menu when the user right-clicks on a table row rendered inside a modal:

Here’s the code for the example above:

Head over to the next example to discover more features of Mantine DataTable.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4