checkbox has wrong value inside grid column

There is a checbox inside a grid column. It has value according to item.status. The table shows only items which item.status = true. If I click to the first item, its value item.status becomes false and the item is hidden (as expected), but second item is rendered with unchecked component, however its value is true.

  private items: Array<{ name: string; status: boolean }> = [
      name: "John",
      status: true,
      name: "Mike",
      status: true,

  private grid!: Grid;

          ${columnBodyRenderer<Record<string, string | boolean>>(
            (item) => html`
                @click=${async (e: MouseEvent) => {
                  item.status = ( as HTMLInputElement).checked;
          ) as DirectiveResult}
async dataProvider(
    params: GridDataProviderParams<any>,
    callback: GridDataProviderCallback<any>
  ) {
    const result = this.items?.filter((item) => {
      return item.status == true;

    callback(result ?? [], result?.length);

The reproducable example in
Is it a bug or the code is wrong?

Tried your example, couldn’t find any workaround with this specific case
Seems to be a bug, could you please create a issue here:
as you already have a reproducible example.

thanks for the answer, bug is reported

Mentioned this in the ticket, but to also post it here: A workaround is to force the grid to rerender before clearing the cache: