# Data tables

The MDataTable component is used for displaying tabular data. Features include sorting, searching, pagination, content-editing, and row selection.

# Usage

The standard data-table will by default render your data as simple rows.

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)	Iron (%)
Frozen Yogurt	159	6	24	4	1%
Ice cream sandwich	237	9	37	4.3	1%
Eclair	262	16	23	6	7%
Cupcake	305	3.7	67	4.3	8%
Gingerbread	356	16	49	3.9	16%

# API

# Examples

# Props

# CustomFilter

You can override the default filtering used with Search prop by supplying a function to the CustomFilter prop. If you need to customize the filtering of a specific column, you can supply a function to the Filter property on header items. The signature is Func<object, string, TItem, bool>. This function will always be run even if Search prop has not been provided. Thus you need to make sure to exit early with a value of true if filter should not be applied.

Search (UPPER CASE ONLY)

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)	Iron (%)
Frozen Yogurt	159	6	24	4	1%
Ice cream sandwich	237	9	37	4.3	1%
Eclair	262	16	23	6	7%
Cupcake	305	3.7	67	4.3	8%
Gingerbread	356	16	49	3.9	16%
Jelly bean	375	0	94	0	0%
Lollipop	392	0.2	98	0	2%
Honeycomb	408	3.2	87	6.5	45%
Donut	452	25	51	4.9	22%
KitKat	518	26	65	7	6%
	Less than

# Dense

Using the Dense prop you are able to give your data tables an alternate style.

# Filterable

You can easily disable specific columns from being included when searching through table rows by setting the property ** Filterable** to false on the header item(s). In the example below the dessert name column is no longer searchable.

# Footer

The MDataTable renders a default footer using the MDataFooter component. You can pass props to this component using FooterProps.

# Group

Using the GroupBy and GroupDesc props you can group rows on an item property. The ShowGroupBy prop will show a group button in the default header. You can use the Groupable property on header items to disable the group button.

# Hide default header and footer

You can apply the HideDefaultHeader and HideDefaultFooter props to remove the default header and footer respectively.

# Loading

You can use the Loading prop to indicate that data in the table is currently loading. If there is no data in the table, a loading message will also be displayed. This message can be customized using the LoadingText prop or the LoadingContent slot.

# Multi sort

Using the MultiSort prop will enable you to sort on multiple columns at the same time. When enabled, you can pass arrays to both SortBy and SortDesc to programmatically control the sorting, instead of single values.

# ShowSelect

The ShowSelect prop will render a checkbox in the default header to toggle all rows, and a checkbox for each default row. You can also switch between allowing multiple selected rows at the same time or just one with the SingleSelect prop.

# Search

The data table exposes a Search prop that allows you to filter your data.

# Fixed right

Fix the last column.

# Stripe

Striped table.

# Contents

# Header

You can use the dynamic slots HeaderColContent to customize only certain columns.

# Item

You can use the dynamic slots ItemColContent to customize only certain columns.

# Simple checkbox

When wanting to use a checkbox component inside of a slot template in your data tables, use the MSimpleCheckbox component rather than the MCheckbox component. The MSimplleChecbox component is used internally and will respect header alignment.

# Misc

# CRUD Actions

MDataTable with CRUD actions using a MDialog component for editing each row.

# EditDialog

The MEditDialog component can be used for editing data directly within a MEditDialog. You can block the closing of the MEditDialog when clicked outside by adding the Persistent prop.

# ExpandableRow

The ShowExpand prop will render an expand icon on each default row. You can customize this with the ItemDataTableExpandContent slot. The position of this slot can be customized by adding a column with Value="data-table-expand" to the Headers array. You can also switch between allowing multiple expanded rows at the same time or just one with the SingleExpand prop. Row items require a unique key property for expansion to work, use ItemKey prop to specify.

# External pagination

Pagination can be controlled externally by using the individual props, or by using the Options prop.

# External sorting

Sorting can also be controlled externally by using the individual props, or by using the the Options prop.

# Server-side paginate and sort

If you’re loading data already paginated and sorted from a backend, you can use the ServerItemsLength prop. Defining this prop will disable the built-in sorting and pagination, and you will instead need to use the available events ( OnPageUpdate, OnSortByUpdate, OnOptionsUpdate, etc) to know when to request new pages from your backend. Use the Loading prop to display a progress bar while fetching data.