Grid

Grids are powerful tools for organizing, visualizing, and interacting with tabular data in software applications.

<script lang="ts">import { onMount } from "svelte";
import { Grid } from "@grampro/svelte-block";
import ImageAction from "$lib/ImageAction.svelte";
const gitDataColumns = [
  { field: "id", width: "200", textAlign: "Right", filter: true },
  {
    field: "imgUrl",
    width: "200",
    textAlign: "Right",
    template: ImageAction,
    showTemplateInExport: true
  },
  { field: "userName", width: "100", filter: true },
  { field: "repo", width: "100", textAlign: "Right" },
  { field: "repoUrl", headerText: "Repo URL", width: "200" },
  { field: "Grid Action", template: ActionButton }
];
const getData = async () => {
  let dataArray = [];
  try {
    const res = await fetch(
      "https://raw.githubusercontent.com/json-iterator/test-data/master/large-file.json"
    );
    const data = await res.json();
    if (data) {
      dataArray = data.map((item) => {
        return {
          id: item.id,
          userName: item.actor.login,
          repo: item.repo.name,
          repoUrl: item.repo.url,
          imgUrl: item.actor.avatar_url
        };
      });
    }
    return dataArray;
  } catch (error) {
    console.error(error);
  }
};
let gitData = [];
onMount(async () => {
  gitData = await getData();
});
</script>

<div class="flex flex-col gap-4 px-20 py-8">
		<Grid
			columns={gitDataColumns}
			dataSource={gitData}
			pageSettings={{ pageNumber: 10 }}
			enableSearch
			enablePdfExport
			pdfName="win-data"
		/>
</div>Copy

Sample

Props

Adding Filter To Columns

  const columns = [
    { field: "name", width: "100", headerText: "Name", filter: true }, // Add filter: true
    { field: "place", headerText: "Place", width: "200" },
  ];Copy

Editable Grid Rows

Grid rows can be edit now (Only Add New Row Feature & Delete is Implemented).

Example

<script>
	import { Grid } from '@grampro/svelte-block';
	import { dataSource } from '$lib/dataSource';

	const columns = [
		{ field: 'OrderID', textAlign: 'Right', type: 'number', isPrimary: true },
		{ field: 'ShipCountry', editable: true },
		{ field: 'ShipAddress' },
		{ field: 'ShipName' },
		{ field: 'ShipCity' },
		{ field: 'ShipRegion' },
		{ field: 'ShipPostalCode' },
		{ field: 'OrderDate', type: 'date' },
		{ field: 'Verified', type: 'boolean' }
	];
</script>

<div class="mx-8 mt-8 max-sm:mx-4">
	<Grid
		{columns}
		{dataSource}
		pageSettings={{ pageNumber: 10 }}
		enableSearch
		enablePdfExport
		enableExcelExport
		enableEditingBox
	/>
</div>
Copy

Editing Grid can be tricky sometimes when you handle different types on inputs, in such cases add type key in the columns array.

For Further Processing the edited data you can use the two additional event functions on:entryAdded & on:entryDeleted (For adding data to grid and deleteing data respectfully).

Example

<script>
	import Grid from '@grampro/svelte-block';
	import { dataSource } from '$lib/dataSource';

	function handleEntryAdded(event: any) {
     const { newEntry } = event.detail;
     console.log("New entry added:", newEntry);
  	}

  function handleEntryDeleted(event: any) {
    const { deletedIndex } = event.detail;
    console.log("Entry deleted at index:", deletedIndex);
  }
</script>

<div class="mx-8 mt-8">
	 <Grid
        {dataSource}
        {columns}
        pageSettings={{ pageNumber: 5 }}
        enableSearch
        enablePdfExport
        pdfName={"Student_data"}
        gridPaginationButtonClass="bg-violet-600"
        enableEditingBox
        on:entryAdded={handleEntryAdded}
        on:entryDeleted={handleEntryDeleted}
      />
</div>Copy

Page options for pdf export

Page options for pdf export lets you change the default settings(layout: ‘portrait’, paperSize: ‘a4’) for pdf pages.

Example

<script>
	import Grid from '@grampro/svelte-block';
	import { dataSource } from '$lib/dataSource';

	const columns = [
		{ field: 'OrderID', width: '200', textAlign: 'Right' },
		{ field: 'ShipCountry', width: '200' },
		{ field: 'ShipAddress', width: '150' },
		{ field: 'ShipName', width: '150' },
		{ field: 'ShipCity', width: '150' },
		{ field: 'ShipRegion', width: '150' },
		{ field: 'ShipPostalCode', width: '150' },
		{ field: 'OrderDate', width: '150' },
		{ field: 'Verified', width: '150' }
	];
</script>

<div class="mx-8 mt-8">
	<Grid
		{columns}
		{dataSource}
		pageSettings={{ pageNumber: 10 }}
		enableSearch
		enablePdfExport
		pdfOptions={{ layout: 'portrait', paperSize: 'a3' }}
	/>
</div>Copy

pdfOptions:

• layout : “portrait” | “landscape”
• paperSize: ‘a3’ | ‘a4’ | ‘letter’ | ‘legal’ | ‘tabloid’ | ‘statement’ | ‘executive’

Navigating to a Particular page in Grid

Going to a Page in Grid is essential sometimes, this can be achieved by invoking a ref of grid and calling goToPage()

Example

<script>
	import { Grid } from '@grampro/svelte-block';

	let gridRef: any;

	function clickInstance() {
		if (gridRef) {
			gridRef.goToPage(2); // Invoking goToPage(pageIndex) from Grid
		}
	}
</script>

<Grid
	columns={gitDataColumns}
	dataSource={gitData}
	pageSettings={{ pageNumber: 10 }}
	enableSearch
	enablePdfExport
	pdfName="win-data"
	bind:this={gridRef}
	/>Copy

Letting the Grid Know: An Asynchronous Operation

Managing data updates and user interactions is crucial. “Letting the Grid Know” is an approach designed to seamlessly handle asynchronous operations such as data fetching and add a visual indicator in such case. This can be achieved by the prop isFetching

Exmaple

<script>
	import { Grid } from '@grampro/svelte-block';

	let isFetching = false;

	// Async Function
	const getData = async () => {
		try {
			isFetching = true;
			//....
		} catch (error) {
			console.error(error);
		} finally {
			isFetching = false;
		}
	};
</script>

<Grid
	columns={gitDataColumns}
	dataSource={gitData}
	pageSettings={{ pageNumber: 10 }}
	enableSearch
	enablePdfExport
	pdfName="win-data"
	bind:this={gridRef}
	{isFetching} // Pass here to output a visual Loader while fetching.
	/>Copy

How to render Custom template in Grid Columns

Grid Supports rendering custom svelete component in grid cells.

Example

+page.svelte

<script>
	import { Grid } from '@grampro/svelte-block';
	import Input from '$lib/Input.svelte';
	import SerialNumber from '$lib/SerialNumber.svelte';
	import { dataSource } from '$lib/dataSource';

	const columns = [
		{ field: 'Sl. No', width: '80', textAlign: 'Right', template: SerialNumber },
		{ field: 'OrderID', width: '100', textAlign: 'Right' },
		{ field: 'CustomerID', width: '100' },
		{ field: 'EmployeeID', width: '100', textAlign: 'Right' },
		{ field: 'Freight', headerText: 'Frieght', width: '100' },
		{ field: 'ShipCountry', width: '100' },
		{ field: 'ShipAddress', width: '150' },
		{ field: 'Remarks', headerText: 'Remarks', template: Input, width: '200' }
	];
</script>

<div class="m-4">
	<Grid2 {columns} {dataSource} pageSettings={{ pageNumber: 10 }} />
</div>Copy

Input.svelte

<script>
	import { Grid } from '@grampro/svelte-block';
	export let rowIndex;
	export let rowData;
</script>

<input placeholder="Enter Remarks" id={`gbs-${rowIndex}`} bind:value={rowData.remarks} />Copy