BlazorDatasheet 0.3.0.1

dotnet add package BlazorDatasheet --version 0.3.0.1                
NuGet\Install-Package BlazorDatasheet -Version 0.3.0.1                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="BlazorDatasheet" Version="0.3.0.1" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BlazorDatasheet --version 0.3.0.1                
#r "nuget: BlazorDatasheet, 0.3.0.1"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install BlazorDatasheet as a Cake Addin
#addin nuget:?package=BlazorDatasheet&version=0.3.0.1

// Install BlazorDatasheet as a Cake Tool
#tool nuget:?package=BlazorDatasheet&version=0.3.0.1                

BlazorDatasheet

A simple datasheet component for editing tabular data.

<img width="512" alt="DatasheetScreenshot" src="https://github.com/anmcgrath/BlazorDatasheet/assets/34253568/afb4fd86-f082-4cdf-bac9-5d4f777c7dcc">

Features
  • Data editing
    • Built in editors including text, date, select, boolean, text area, enum
    • Add custom editors for any data type
  • Conditional formatting
  • Data validation
  • Formula
  • Keyboard navigation
  • Copy and paste from tabulated data
  • Virtualization - handles many cells at once in both rows & cols.

Demo: https://anmcgrath.github.io/BlazorDatasheet/

Getting Started

Install the NuGet package
dotnet add package BlazorDatasheet
Configure Program.cs

In Program.cs, add the required services:

builder.Services.AddBlazorDatasheet();
Import JS/CSS

In _Layout.cshtml or index.html add

<link href="_content/BlazorDatasheet/sheet-styles.css" rel="stylesheet"/>

and

<script src="_content/BlazorDatasheet/blazor-datasheet.js" type="text/javascript"></script>

Blazor Datasheet provides a Datasheet Blazor component that accepts a Sheet.

A Sheet holds the data and configuration for a Datasheet. The data is set per Cell, or can be built using the ObjectEditorBuilder, which creates a datasheet based on a list of objects.

The following code displays an empty 3 x 3 data grid.

<Datasheet
    Sheet="sheet"/>

@code{

    private Sheet sheet;

    protected override void OnInitialized()
    {
        sheet = new Sheet(3, 3);
    }

}

The default editor is the text editor, but can be changed by defining the Type property of each cell.

Setting & getting cell values

Cell values can be set in a few ways:

sheet.Cells[0, 0].Value = "Test"
sheet.Range("A1").Value = "Test";
sheet.Cells.SetValue(0, 0, "Test");
sheet.Commands.ExecuteCommand(new SetCellValueCommand(0, 0, "Test"));

In this example, the first two methods set the value but cannot be undone. The last two methods can be undone.

Formula

Formula can be applied to cells. When the cells or ranges that the formula cells reference change, the cell value is re-calculated.

Currently, the whole sheet is calculated if any referenced cell or range changes.

sheet.Cells[0, 0].Formula = "=10+A2"

Formatting

Cell formats can be set in the following ways:

sheet.Range("A1:A2").Format = new CellFormat() { BackgroundColor = "red" };
sheet.Commands.ExecuteCommand(
    new SetFormatCommand(new RowRegion(10, 12), new CellFormat() { ForegroundColor = "blue" }));
sheet.SetFormat(sheet.Range(new ColumnRegion(5)), new CellFormat() { FontWeight = "bold" });
sheet.Cells[0, 0].Format = new CellFormat() { TextAlign = "center" };

When a cell format is set, it will be merged into any existing cell formats in the region that it is applied to. Any non-null format paremeters will be merged:

sheet.Range("A1").Format = new CellFormat() { BackgroundColor = "red" };
sheet.Range("A1:A2").Format = new CellFormat() { ForegroundColor = "blue" };
var format = sheet.Cells[0, 0].Format; // backroundColor = "red", foreground = "blue"
var format2 = sheet.Cells[1, 0].Format; // foreground = "blue"

Cell types

The cell type specifies which renderer and editor are used for the cell.

sheet.Range("A1:B5").Type = "boolean"; // renders a checkbox

Custom editors and renderers can be defined. See the examples for more information.

Validation

Data validation can be set on cells/ranges. There are two modes of validation: strict and non-strict. When a validator is strict, the cell value will not be set by the editor if it fails validation.

If validation is not strict, the value can be set during editing but will show a validation error when rendered.

Although a strict validation may be set on a cell, the value can be changed programmatically, but it will display as a validation error.

sheet.Validators.Add(new ColumnRegion(0), new NumberValidator(isStrict: true));

Regions and ranges

A region is a geometric construct, for example:

var region = new Region(0, 5, 0, 5); // r0 to r5, c0 to c5
var cellRegion = new Region(0, 0); // cell A1
var colRegion = new ColumnRegion(0, 4); // col region spanning A to D
var rowRegion = new RowRegion(0, 3); // row region spanning 1 to 4

A range is a of region that also knows about the sheet. Ranges can be used to set certain parts of the sheet.

var range = sheet.Range("A1:C5);
var range = sheet.Range(new ColumnRegion(0));
var range = sheet.Range(0, 0, 4, 5);
Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.3.0.1 79 7/6/2024
0.3.0 91 6/30/2024
0.2.1 217 5/19/2024
0.2.0 106 5/5/2024