diff --git a/.changeset/fix-datatable-column-null.md b/.changeset/fix-datatable-column-null.md new file mode 100644 index 0000000000..907117c43a --- /dev/null +++ b/.changeset/fix-datatable-column-null.md @@ -0,0 +1,7 @@ +--- +"@evidence-dev/core-components": patch +--- + +Fix DataTable not rendering rows when data is loaded asynchronously + +Added null check in Column.svelte's checkColumnName() function to guard against data not being ready during initial render. This fixes an issue where DataTable would show the table container (search box, pagination) but no actual rows when using Query objects or when data loads asynchronously. diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/Column.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/Column.svelte index 683415f9ed..cb662ac65c 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/table/Column.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/table/Column.svelte @@ -23,6 +23,10 @@ */ function checkColumnName() { try { + // Guard against data not being ready yet (e.g., during initial render or when using Query objects) + if (!$props.data || !$props.data.length || !$props.data[0]) { + return; // Data not ready, skip validation for now - will be called again when data loads + } if (!Object.keys($props.data[0]).includes(id)) { error = 'Error in table: ' + id + ' does not exist in the dataset'; throw new Error(error);