P11Table Component

The P11Table component is a versatile data display element that renders tabular data using native HTML <table> elements. It integrates seamlessly with Bootstrap's table styling utilities and is designed with accessibility in mind, ensuring proper structure for screen readers.

Note: The Caption parameter is important for accessibility, providing a summary for screen readers. You can either pass a collection of Items and use child components like P11TableHeader, P11TableRow, etc., or define the table structure entirely within ChildContent.

P11Table Component Examples

These examples demonstrate various configurations and functionalities of the P11Table component, showcasing its flexibility for different data display scenarios.

1. Standard Usage with Bootstrap Styling and Improved Accessibility

A fully featured table with striped rows, hover effect, borders, responsive behavior, and a descriptive caption for screen readers.

Overview of persons in our database
No Columns Defined

Implementation


<P11Table TItem="Person2"
          Items="people3"
          IsStriped="true"
          IsHoverable="true"
          IsBordered="true"
          IsResponsive="true"
          CssClass="my-custom-table-style"
          Caption="Übersicht der Personen in unserer Datenbank">
    <P11Column TItem="Person2" Header="ID">
        <CellContent Context="person">
            @person.Id
        </CellContent>
    </P11Column>
    <P11Column TItem="Person2" Header="Name">
        <CellContent Context="person">
            <strong>@person.FirstName @person.LastName</strong>
        </CellContent>
    </P11Column>
    <P11Column TItem="Person2" Header="Alter">
        <CellContent Context="person">
            @person.Age
        </CellContent>
    </P11Column>
    <P11Column TItem="Person2" Header="Stadt">
        <CellContent Context="person">
            @person.City
        </CellContent>
    </P11Column>
    <P11Column TItem="Person2" Header="Status">
        <CellContent Context="person">
            @if (person.IsActive)
            {
                <span class="badge bg-success">Aktiv</span>
            }
            else
            {
                <span class="badge bg-secondary">Inaktiv</span>
            }
        </CellContent>
    </P11Column>
    <P11Column TItem="Person2" Header="Aktionen">
        <CellContent Context="person">
            <button class="btn btn-sm btn-info"
                    @onclick="() => EditPerson(person)"
                    aria-label="Person @person.FirstName @person.LastName bearbeiten">Bearbeiten</button>
        </CellContent>
    </P11Column>
</P11Table>

@if (selectedPersonForEdit != null)
{
    <div class="mt-3 p-3 border rounded bg-light">
        <h5>Bearbeite Person: @selectedPersonForEdit.FirstName @selectedPersonForEdit.LastName</h5>
        <p>Dies ist ein Platzhalter für ein Bearbeitungsformular (Variante B des DataGrids).</p>
        <button class="btn btn-primary" @onclick="() => SavePerson(selectedPersonForEdit)">Speichern</button>
        <button class="btn btn-secondary" @onclick="() => CancelEdit()">Abbrechen</button>
        <button class="btn btn-danger" @onclick="() => DeletePerson(selectedPersonForEdit)">Löschen</button>
    </div>
}


// --- Datenmodelle ---
public class Person2
{
    public int Id { get; set; }
    public string FirstName { get; set; } = string.Empty;
    public string LastName { get; set; } = string.Empty;
    public int Age { get; set; }
    public string City { get; set; } = string.Empty;
    public bool IsActive { get; set; }
}

// --- Beispieldaten ---
private List<Person2> people3 = new()
{
    new Person2 { Id = 1, FirstName = "Alice", LastName = "Smith", Age = 30, City = "New York", IsActive = true },
    new Person2 { Id = 2, FirstName = "Bob", LastName = "Johnson", Age = 24, City = "London", IsActive = false },
    new Person2 { Id = 3, FirstName = "Charlie", LastName = "Brown", Age = 45, City = "Paris", IsActive = true },
    new Person2 { Id = 4, FirstName = "Diana", LastName = "Miller", Age = 38, City = "Berlin", IsActive = true }
};

// --- Logik für Aktionen (Beispiel Master-Detail-Ansatz) ---
private Person2? selectedPersonForEdit;

private void EditPerson(Person2 person)
{
    selectedPersonForEdit = person;
    Console.WriteLine($"Bearbeiten von: {person.FirstName} {person.LastName}");
}

private void SavePerson(Person2 person)
{
    Console.WriteLine($"Person '{person.FirstName}' gespeichert.");
    selectedPersonForEdit = null;
}

private void DeletePerson(Person2 person)
{
    people3.Remove(person);
    selectedPersonForEdit = null;
    Console.WriteLine($"Person '{person.FirstName}' gelöscht.");
    // Forciert das Rendern der UI nach dem Löschen
    StateHasChanged();
}

private void CancelEdit()
{
    selectedPersonForEdit = null;
    Console.WriteLine("Bearbeitung abgebrochen.");
}

2. Compact, Dark Table without Hover Effect (with Caption)

Demonstrates <code>IsSmall</code> and <code>IsDark</code>.

Compact view of the person list
No Columns Defined

Implementation


<P11Table TItem="Person2"
          Items="people3"
          IsSmall="true"
          IsDark="true"
          IsStriped="true"
          IsResponsive="true"
          Caption="Kompakte Ansicht der Personenliste">
    <P11Column TItem="Person2" Header="Name">
        <CellContent Context="person">
            @person.FirstName
        </CellContent>
    </P11Column>
    <P11Column TItem="Person2" Header="Stadt">
        <CellContent Context="person">
            @person.City
        </CellContent>
    </P11Column>
    <P11Column TItem="Person2" Header="Aktiv">
        <CellContent Context="person">
            <input type="checkbox" checked="@person.IsActive" disabled="true" />
        </CellContent>
    </P11Column>
</P11Table>


// (people3 data model and list are defined once in the @code block)
// No additional C# code specific to this example beyond the data.

3. Table with No Data (with Default Styling and Caption)

Demonstrates the display when the data list is empty.

Table with optional data
No Columns Defined
No data available.

Implementation


<P11Table TItem="Person2" Items="new List<Person2>()"
          IsBordered="true"
          Caption="Tabelle mit optionalen Daten">
    <P11Column TItem="Person2" Header="Name">
        <CellContent Context="person">
            @person.FirstName
        </CellContent>
    </P11Column>
    <P11Column TItem="Person2" Header="Beruf">
        <CellContent Context="person">
            @person.City
        </CellContent>
    </P11Column>
</P11Table>


// (Person2 data model is defined once in the @code block)
// No additional C# code specific to this example beyond the data.

4. Table for Products with Minimal Styling (with Caption)

Displaying product information without borders and stripes, but with hover effect.

Inventory list of products
No Columns Defined

Implementation


<P11Table TItem="Product" Items="products"
          IsHoverable="true"
          IsResponsive="true"
          Caption="Inventarliste der Produkte">
    <P11Column TItem="Product" Header="Produktname">
        <CellContent Context="product">
            @product.Name
        </CellContent>
    </P11Column>
    <P11Column TItem="Product" Header="Preis">
        <CellContent Context="product">
            @product.Price.ToString("C2", CultureInfo.CurrentCulture)
        </CellContent>
    </P11Column>
    <P11Column TItem="Product" Header="Verfügbar">
        <CellContent Context="product">
            <input type="checkbox" checked="@product.InStock" disabled="true" />
        </CellContent>
    </P11Column>
</P11Table>


// --- Datenmodelle ---
public class Product
{
    public string Name { get; set; } = string.Empty;
    public decimal Price { get; set; }
    public bool InStock { get; set; }
}

// --- Beispieldaten ---
private List<Product> products = new()
{
    new Product { Name = "Laptop X", Price = 1200.50m, InStock = true },
    new Product { Name = "Mouse Y", Price = 25.00m, InStock = true },
    new Product { Name = "Keyboard Z", Price = 80.75m, InStock = false }
};

Component API

Parameter	Type	Default	Description
`Items`	`IEnumerable<TItem>`	-	Gets or sets the collection of items to display in the table.
`ChildContent`	`RenderFragment`	-	Gets or sets the content to render inside the table, typically used for custom table elements like `<P11TableHeader>`, `<P11TableRow>`, etc.
`Caption`	`string`	`null`	A brief description or title for the table, displayed for screen readers and optionally visible.
`CssClass`	`string`	`null`	Gets or sets additional CSS classes to apply to the table.
`IsStriped`	`bool`	`false`	Gets or sets a value indicating whether the table should have striped rows.
`IsHoverable`	`bool`	`false`	Gets or sets a value indicating whether the table rows should highlight on hover.
`IsBordered`	`bool`	`false`	Gets or sets a value indicating whether the table should have borders.
`IsSmall`	`bool`	`false`	Gets or sets a value indicating whether the table should be small in size.
`IsResponsive`	`bool`	`true`	Gets or sets a value indicating whether the table should be responsive (horizontally scrollable on small screens).
`IsDark`	`bool`	`false`	Gets or sets a value indicating whether the table should use dark styling.