justinwilkinson / datatables.blazor Goto Github PK

Hi,
Thank you for the component.
Can I add a button to the DataTableColumn content?

You may want to rename your "Column" component to "DTColumn" or something like that, otherwise if people are using other libraries that have a Column component (i.e. Blazorise, etc) they'll get an ambiguous error like:

Obviously one can specify the type further (Blazorise.Column, DataTables.Blazor.Column), but perhaps that's not the best experience.

Thanks for the component library!

Do you mind if I do an upgrade of Datatables to 1.10.24? I'll be glad to put together a PR for it.

I've been looking for a way to integrate DataTables with Blazor, and this project lines up with how I'd like to do the integration. I'd like to help out and contribute to this project, if you're open to it.

Firstly, thanks for this great project as it is exactly what I was looking for to bring datatables into Blazor.

I found an issue that when initially loading the datatable it runs as expected but if I wanted to change/modify/update the data, it did not seem to take effect, specifically by changing the DOM or updating the data object.

To replicate the issue, using your demo project I used the WeatherDataset Dataset as the source of data for the object and DOM display options. I modified the DOM table as below:

<DataTable @ref="WeatherDomTable" Id="MyTableDomSourced" Class="table table-striped table-bordered w-100">
	<thead>
		<tr>
			<th>Date</th>
			<th>Temp. (C)</th>
			<th>Summary</th>
		</tr>
	</thead>
	<tbody>
		@foreach (Weather w in WeatherDataset)
	{
			<tr>
				<td>@w.Date.ToString("yyyy-MM-dd")</td>
				<td>@w.TemperatureC</td>
				<td>@w.Summary</td>
			</tr>
	}
	</tbody>
</DataTable>

I then created a button and function that would generate a random list of Weather objects and assign them to the WeatherDataset and call StateHasChanged. The DOM table would update the HTML but the datatable would not recognise the change and just show all the rows but not paginate, search or show the correct total number of items. The object table would not update at all until I navigated to another tab and back again.

I found a solution by adding the following function to the Datatables.Blazor\Datatable.razor page:

public async Task RefreshTable() {
	await Datatables.DestroyAsync(_tableReference);
	await Datatables.InitialiseAsync(_tableReference, DataTableOptions.FromComponent(this));
	await InvokeAsync(StateHasChanged);
}

So then I reference your datatable instance on my page, then when I update the WeatherDataset I then call WeatherDomTable.Refresh() and the table seems to update correctly.

I was wondering if this change could be added to main branch of this project or if there is any better way to update data and have it displayed.

To give some background on my project, I have a timer that will poll a database every 2 minutes and I need to update the datatable accordingly.

Here's an idea I'm thinking about. DataTables supports DOM sourced data - see their example at https://datatables.net/examples/data_sources/dom.

What do you think about supporting that model? It would be used something like this:

<DataTable>
   <thead>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Age</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tiger Nixon</td>
         <td>System Architect</td>
         <td>Edinburgh</td>
         <td>61</td>
         <td>2011/04/25</td>
         <td>$320,800</td>
      </tr>
      <tr>
         <td>Garrett Winters</td>
         <td>Accountant</td>
         <td>Tokyo</td>
         <td>63</td>
         <td>2011/07/25</td>
         <td>$170,750</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Age</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </tfoot>
</DataTable>

If this change were made, the usage on the Demo page would have to change, too. Currently, it looks like this:

<DataTable SourceUrl="sample-data/weather.json" Class="table table-striped table-bordered w-100">
    <Column Title="Date" Data="Date" />
    <Column Title="Temp. (C)" Data="TemperatureC" />
    <Column Title="Summary" ClassName="dt-body-center" Data="Summary" />
</DataTable>

It would have to look more like this:

<DataTable SourceUrl="sample-data/weather.json" Class="table table-striped table-bordered w-100">
   <thead>
      <tr>
         <Column Title="Date" Data="Date" />
         <Column Title="Temp. (C)" Data="TemperatureC" />
         <Column Title="Summary" ClassName="dt-body-center" Data="Summary" />
      </tr>
   </thead>
</DataTable>

What do you think? If you're ok with this, I'll put together a PR.

Is it possible to pass in a dataset to the datatable? I haven't figured out a way to do this and am not sure if this is a feature.