the datasource of table about ant-design-blazor

[ElderJames]

Thanks for contacting us @Jason190 , could you please post your code here to reproduce?

[Jason190]

Hi, @ElderJames . Thx for your reply.

<Table TItem="TableData" DataSource="@ServiceTableData.Datas" [email protected] ScrollY="412px" EnableVirtualization HidePagination>

    <GenerateColumns Range="1.." Definitions=definitions />

    <ActionColumn Title="Action">
        <Space Size=@("middle")>
            <SpaceItem>
                <a>Invite @context.ID</a>
            </SpaceItem>
        </Space>
    </ActionColumn>
</Table>

As you see. I bind the DataSource to Datas which belong to ServiceTableData.

public class ServiceTableData : IServiceTableData
{
    public TableData[]? Datas { get; set; } 


    public event Action<TableData[]> OnChange;

    public void Update(TableData[] datas)
    {
        Datas = datas;
        OnChange?.Invoke(datas);
    }
}

This is ServiceTableData class above.

foreach (double[] item in objArray)
{
    TableData oneline = new TableData()
    {
        Key = keyNum++.ToString(),
        ID = item[0].ToString(),
        ObjectID = item[1].ToString(),
        Area_size = item[2]
    };
    datas = datas.Concat(new TableData[] {oneline}).ToArray();
}

ServiceTableData.Update(datas);

This is in another class which is actual assignment to DataSource. Perhaps I'm missing some conceptual details, please let me know.
Thanks a lot.

[GoldSucc]

@Jason190 Are you using Interactive rendering? By the way, you can generate columns with for loop and PropertyColumn, for example, I used it for my dynamic schedule table:
` @for (int i = 0; i < _weeks; i++)
{
var weekIndex = i + _startWeek;
var title = $"Week {weekIndex}";
var weekDays = i == 0 ? _firstWeekDays : i == _weeks - 1 ? _lastWeekDays : 7;
var width = weekDays * 15;
var index = i;

            @{
                if (context.weekDataList.Length != _weeks)
                {
                    index = -1;
                }

                var week = index >= 0 ? context.weekDataList[index] : new WeekData();
                var segments = week.segments;
            }
            <ScheduleFragment Segments="@segments"/>
        </PropertyColumn>
    }`
    comparing length is actually required because it  re renders with previous context and new data (it updates data, rerenders and only then updates column definitions then rerenders again and so we need to not access data before new column definition re-render) and causes index out of bounds.

[Jason190]

@GoldSucc Thank you for your enthusiastic reply!
I do actually want to make changes to the data in the table while the program is running.
I didn't find anything in the example program about that part, though. So I'm guessing that assigning values directly to the binding value would work.

[GoldSucc]

@Jason190 yes, I would recommend to assign a new list/array to datasource each time something changes, for example I do this:

in table _entries is an array of schedule entries and when user requests schedule for a new date range, I recalculate schedule and do this: _entries = scheduleEntries; where scheduleEntries is a new array of entries. for better performance I recommend to use struct instead of classes and array instead of a list, it will be more memory efficient and faster

[Jason190]

@GoldSucc Hi,
Do you means that the could not re-render in program running? It seems make sense.

[GoldSucc]

@Jason190 column definitions are render fragment and after you change data source it will try to render new data with outdated render fragment and only then it will recalculate render fragment of columns, which may cause errors, at least it happened for me. because I render week schedule, it can cause index out of bound if new date range contains more weeks than a previous one, so I check if that's the case. may be it can be fixed by overriding should re-render method and prevent re-rendering before full state update, but for me simpler solution is to check if new column render fragment have same column count as a required week count

[Jason190]

I have to try it tomorrow. thanks again!

…

---- Replied Message ---- | From | ***@***.***> | | Date | 03/12/2024 16:42 | | To | ***@***.***> | | Cc | ***@***.***>***@***.***> | | Subject | Re: [ant-design-blazor/ant-design-blazor] the datasource of table (Issue #3720) | @Jason190 column definitions are render fragment and after you change data source it will try to render new data with outdated render fragment and only then it will recalculate render fragment of columns, which may cause errors, at least it happened for me. because I render week schedule, it can cause index out of bound if new date range contains more weeks than a previous one, so I check if that's the case. may be it can be fixed by overriding should re-render method and prevent re-rendering before full state update, but for me simpler solution is to check if new column render fragment have same column count as a required week count — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[GoldSucc]

@Jason190 by the way, to enable re-rendering of the table, you should enable InteractiveServer, InteractiveWebAssembly or InteractiveAuto render modes, it looks like table is not working properly when statically rendered. For static rendering I would recommend to use good old html table instead of ant component

[Jason190]

Getting the instance of the table via the ref method, I find that the datasource is empty in the instance. But I have just assigned the value. Why is this?

[GoldSucc]

@Jason190 Can you share your code? It may depend on lifecycle usage. Which render mode are you using?

[GoldSucc]

@Jason190 also most of the times you don't have to use ref to assign, you can bind value by using <Table DataSource="_myList"
have you checked that value you are assigning is not null?

[Jason190]

@GoldSucc I'm completely dizzy already. Could you write an example of this part for me?

[GoldSucc]

@Jason190 can create complete example for you after work day. busy for now. also you can send me your code and may be I will be able to help you fixing

[Jason190]

@GoldSucc Would you tell me your email address?

[GoldSucc]

@Jason190 [email protected], [email protected]

[ElderJames]

Hello @Jason190 @GoldSucc , have you solved the issue?