Tables

Overview

Tables are grid-based UI elements that organize data into rows and columns, allowing for structured presentation and easy comparison of information. They are commonly used in applications and websites to display data sets, such as financial reports, product catalogs, or schedules. Tables enhance data readability and enable users to quickly locate specific details.

Modus Tables Documentation

Usage

<modus:DataGrid ItemsSource="{Binding Users}"
                IsSortable="True"
                ShowDivider="{Binding DividerToggled, Mode=OneWay}"
                SelectionMode="{Binding SelectionMode}"
                x:Name="ModusDataGrid">
    <modus:DataGrid.Columns>
        <!-- Image column -->
        <modus:ImageColumn Title="Logo"
                           PropertyName="ProfilePic"
                           Width="0.4*" />
        <!-- Text Column -->
        <modus:TextColumn Title="Team"
                          PropertyName="Name"
                          DescriptionProperty="Gender"
                          Width="*"
                          HorizontalContentAlignment="Start" />
        <!-- Custom Column -->
        <modus:DataGridColumn Title="Score"
                              Width="0.4*"
                              PropertyName="Score">
          <modus:DataGridColumn.CellTemplate>
            <DataTemplate>
              <Border HeightRequest="60"
                      WidthRequest="60"
                      VerticalOptions="Center"
                      Stroke="{Binding Color}"
                      StrokeShape="RoundRectangle 40"
                      StrokeThickness="8"
                      Margin="0,0,0,0">
              <Label  Text="{Binding Score}"
                      HorizontalOptions="Center"
                      VerticalOptions="Center"
                      TextColor="Black" />
              </Border>
            </DataTemplate>
          </modus:DataGridColumn.CellTemplate>
        </modus:DataGridColumn>
        <!-- Boolean column -->
        <modus:BooleanColumn Title="Verified"
                             PropertyName="IsVerified"
                             Width="100" />
     </modus:DataGrid.Columns>
</modus:DataGrid>

Output

DataGrid Properties

Property	type	Description
IsSortable	`bool`	Set to true the datagrid can be sorted
SelectedItems	`IList<object>`	List of Data grid items selected
SelectedItem	`object?`	The Selected Item
ShowDivider	`bool`	Set to true the divider is shown
EmptyView	`View`	A view set as empty view will appear in the table of items are not passed
SelectionMode	`SelectionMode`	Sets selection mode to either None,Single,Multiple.
ItemsSource	`IEnumerable`	List of list items to be displayed

Columns of Data Grids

There are four type of columns Image Column. Text Column, Custom Column, Boolean Column.

DataGridColumn Properties

Property	type	Description
Title	`string`	Title of the datagrid
Width	`GridLength`	Length of the column
PropertyName	`string`	Title of the column
CellTemplate	`DataTemplate`	Can set the template of the datagrid item
LineBreakMode	`LineBreakMode`	Enumeration specifying various options for line breaking
HorizontalContentAlignment	`LayoutOptions`	Aligns the content of the datagrid to horizontal
VerticalContentAlignment	`LayoutOptions`	Aligns the content of the datagrid to vertical
SortingEnabled	`bool`	Set to true the column can be sorted

TextColumn Properties

Property	type	Description
Description	`string`	Description of a data grid item

Getting Started