AgGrid Evidence component

AgGrid.svelte

<script>
  import { onMount } from 'svelte';
  import { AllCommunityModule, ModuleRegistry, createGrid } from 'ag-grid-community';

  export let data = [];

  ModuleRegistry.registerModules([AllCommunityModule]);
  
  function calculateColumnWidth(data) {
    return Object.keys(data).map(field => {
      const value = data[field];
      if (value instanceof Date ) {
        return { field, width: 120};
      } else {
        const length = String(value).length; 
        return { field, width: Math.max(100, length * 10) }; 
      }
    });
  }

  let gridOptions;

  onMount(() => {
    gridOptions = {
      rowData: data,
      columnDefs: calculateColumnWidth(data[0]),
      defaultColDef: {
        resizable: true,
      },
      rowHeight: 25, 
    };

    const myGridElement = document.querySelector('#myGrid');
    new createGrid(myGridElement, gridOptions);
  });
</script>

<div id="myGrid" class="ag-theme-alpine" style="height: 500px; width: 100%;"></div>