GridCraft

https://gridcraft.mediakular.com/
Admin
GridCraft is a versatile headless component for SvelteKit apps, enabling seamless data visualization...
Tokens:14,029
Snippets:115
Trust Score:6.1
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install GridCraft Package

Source: https://gridcraft.mediakular.com/docs/quickstart

Install the GridCraft package into your SvelteKit application using npm, yarn, pnpm, or bun. This is the first step to using GridCraft's data grid functionality.

```npm
npm install @mediakular/gridcraft
```

```yarn
yarn add @mediakular/gridcraft
```

```pnpm
pnpm add @mediakular/gridcraft
```

```bun
bun add @mediakular/gridcraft
```

--------------------------------

### Full Grouping Example with Dynamic Column Selection (SvelteKit)

Source: https://gridcraft.mediakular.com/docs/grouping

This comprehensive example illustrates setting up GridCraft data grid with dynamic grouping in SvelteKit. It includes defining client data structure, configuring columns, and using a select box to allow users to choose a column for grouping, dynamically updating the `groupby` property.

```svelte
<script>
interface Client {
    id: string;
    firstname: string;
    lastname: string;
    age: number;
}

export let data: PageData;
let clients: Client[] = data.clients;

let groupBy = "";

let columns: GridColumn<Client>[] = [
    {
        key: 'firstname',
        title: 'First Name',
    },
    {
        key: 'lastname',
        title: 'First Name',
    },
    {
        key: 'age',
        title: 'Age'
    }
];
</script>

<!-- this select box is just for demonstration purposes -->
<select bind:value={groupBy} >
    <option value="">Select Group By Column</option>
    {#each columns as col (col.key)}
        <option value={col.key}>{col.title}</option>
    {/each}
</select> 

<Grid 
    bind:data={clients} 
    bind:columns
    bind:groupby />
```

--------------------------------

### Integrate Custom Pagination Component with GridCraft

Source: https://gridcraft.mediakular.com/docs/paging

This example shows how to use the custom 'MyPaging.svelte' component within a SvelteKit application. It demonstrates importing both the Grid and the custom MyPaging component and binding the paging data to them.

```svelte
<script>
import { Grid, type PagingData } from "@mediakular/gridcraft";
import MyPaging from "$lib/components/MyPaging.svelte";

let data = [
    // your data
];

let paging = {
    itemsPerPage: 20,
    currentPage: 2,
    itemsPerPageOptions: [10, 20, 50]
} as PagingData;

</script>

<MyPaging bind:paging />

<Grid {data} {paging} />

<MyPaging bind:paging />
```

--------------------------------

### Use Grid Component in SvelteKit

Source: https://gridcraft.mediakular.com/docs/quickstart

Reference the Grid component from '@mediakular/gridcraft' in your SvelteKit page and bind it to your data. This will render a default-styled table with all properties from the provided data interface.

```svelte
<script>
  import { Grid } from '@mediakular/gridcraft';

  export let data;
  let clients: Client[] = data.clients;
</script>

<Grid bind:data={clients} />
+page.svelte
```

--------------------------------

### Full SvelteKit Example for Grid Row Selection

Source: https://gridcraft.mediakular.com/docs/rowselection

A complete SvelteKit example demonstrating how to set up GridCraft with row selection enabled. It includes defining client data, columns, binding selected rows, and a toggle for showing checkboxes.

```svelte
<script>
import { Grid, type GridColumn } from "@mediakular/gridcraft";

interface Client {
    id: string;
    firstname: string;
    lastname: string;
    age: number;
}

export let data: PageData;
let clients: Client[] = data.clients;

let showCheckboxes = true;
let selectedRows:Client[] = [];

let columns: GridColumn<Client>[] = [
    {
        key: 'firstname',
        title: 'First Name',
    },
    {
        key: 'lastname',
        title: 'First Name',
    },
    {
        key: 'age',
        title: 'Age'
    },
];
</script>

<!-- Just for demonstration purposes -->
<label for="showCheckboxes">
    <input type="checkbox" checked={showCheckboxes == true} on:change={() => showCheckboxes = !showCheckboxes} id="showCheckboxes" />
    &nbsp;Show checkboxes
</label>
{#if showCheckboxes}
    Selected Rows:
    <pre>
        {JSON.stringify(selectedRows, null, 2)}
    </pre>
{/if}
<!-- End: Just for demonstration purposes -->

<Grid 
    bind:data={clients}
    bind:columns
    bind:selectedRows
    bind:showCheckboxes />
```

--------------------------------

### Configure Paging Variables in GridCraft

Source: https://gridcraft.mediakular.com/docs/paging

This example demonstrates how to define and configure paging variables such as itemsPerPage, currentPage, and itemsPerPageOptions. These variables control the pagination behavior of the GridCraft data table.

```javascript
let paging = {
    itemsPerPage: 20,
    currentPage: 2,
    itemsPerPageOptions: [10, 20, 50]
} as PagingData;
```

--------------------------------

### Dynamically Switching GridCraft Themes at Runtime

Source: https://gridcraft.mediakular.com/docs/theming

Provides a Svelte example of how to dynamically change the active theme for GridCraft components during runtime. This is achieved by updating a theme variable and re-rendering the grid components.

```svelte
<script>
    import { Grid, GridFooter, PrelineTheme, PlainTableCssTheme } from "@mediakular/gridcraft";
    ... 
    let theme = PlainTableCssTheme;
</script>

<button on:click={() => theme = PlainTableCssTheme}>Plain Css Theme</button>
<button on:click={() => theme = PrelineTheme}>Preline Theme</button>

<Grid ... {theme}/>
<GridFooter {theme}/>
```

--------------------------------

### Import Grid and GridFooter Components in GridCraft

Source: https://gridcraft.mediakular.com/docs/paging

This snippet shows how to import the necessary Grid and GridFooter components, along with the PagingData type, from the '@mediakular/gridcraft' library. These are essential for implementing pagination.

```javascript
import { Grid, GridFooter, type PagingData } from "@mediakular/gridcraft";
```

--------------------------------

### Create and Use Custom GridCraft Theme

Source: https://gridcraft.mediakular.com/docs/theming

This example shows the process of creating a custom GridCraft theme by defining a `GridTheme` object and exporting it. It includes assigning components to various parts of the grid, footer, and paging. The custom theme is then imported and used in a Grid component.

```javascript
const MyFirstTableTheme : GridTheme = {
    footer: Footer,
    paging: Paging,
    grid: {
        ...
    }
}

export default MyFirstTableTheme;
```

```svelte
<script>
  import MyFirstTableTheme from "$lib/components/grid/theme/my-first-table-theme"

  let theme = MyFirstTableTheme;
</script>

<Grid ... {theme} />
```

--------------------------------

### Configure Column with Accessor for Inline Editing

Source: https://gridcraft.mediakular.com/docs/columns

This example extends the column definition by adding an `accessor` function. The accessor returns an object containing the cell's `value` and an `onSaveChanges` callback function. This setup enables inline editing by providing the current data and a mechanism to persist changes.

```svelte
<script>
import FirstnameEditCell from "$lib/components/grid/cells/FirstnameEditCell.svelte"

let columns = [
    ...
    {
        key: 'firstname',
        title: 'First name',
        accessor: (row: Client) => {
            return {
                value: row.firstname,
                onSaveChanges: (newValue:string) => {
                    console.log("New value:", newValue, "Old value:", row.firstname);
                    //TODO: Here we are saving the changes into the database
                }
            }
        },
        renderComponent: FirstnameEditCell
    },
    ...
]

</script>
+page.svelte
```

--------------------------------

### Use GridFooter Component for GridCraft Pagination

Source: https://gridcraft.mediakular.com/docs/paging

This code illustrates how to integrate the GridFooter component with the Grid component to enable pagination. It shows binding the data to the Grid and the paging object to both Grid and GridFooter.

```html
<Grid bind:data={clients} {paging}/>

<GridFooter bind:paging />
```

--------------------------------

### Create a Custom Pagination Component in SvelteKit

Source: https://gridcraft.mediakular.com/docs/paging

This snippet defines a custom Svelte component 'MyPaging.svelte' for handling pagination. It includes logic for navigating to next/previous pages and updating items per page, along with the necessary UI elements.

```svelte
<script>
import { type PagingData } from "@mediakular/gridcraft";

export let paging: PagingData; 

let itemsPerPage = 10;

function nextPage() {
    paging.currentPage += 1;
}

function prevPage() {
    paging.currentPage -= 1;
}

function handleItemsPerPageChange() {
    paging.itemsPerPage = itemsPerPage;
}
</script>

<div>
    <select bind:value={itemsPerPage} on:change={handleItemsPerPageChange}>
        {#each paging.itemsPerPageOptions as option (option)}
            <option value="{option}" selected={option == paging.itemsPerPage}>{option}</option>
        {/each}
    </select>

    Page <span>{paging.currentPage}</span> of <span>{paging.totalPages}</span>

    <button on:click={prevPage} type="button" disabled={paging.currentPage == 1 ? true : false}>
        Previous
    </button>

    <button on:click={nextPage} type="button" disabled={paging.currentPage < paging.totalPages ? false : true}>
        Next
    </button>
</div>
```

--------------------------------

### Bind Grouping Key and Configure Default Expansion (SvelteKit)

Source: https://gridcraft.mediakular.com/docs/grouping

This example shows how to dynamically bind the `groupby` property to a Svelte variable (`columnKey`) and set the default state of group headers using `groupsExpandedDefault`. This allows for interactive control over data grouping and its initial visibility in GridCraft tables.

```svelte
<script>
interface Client {
    ...
    status: Date;
}

let columnKey = "status";
</script>

<Grid 
    bind:data={clients} 
    ...
    bind:groupby={columnKey} />
```

```svelte
<Grid 
    bind:data={clients} 
    ...
    groupsExpandedDefault={false}
    groupby={columnKey} />
```

--------------------------------

### Modifying a GridCraft Theme Component

Source: https://gridcraft.mediakular.com/docs/theming

Shows an example of how to customize a specific component within a GridCraft theme, such as modifying the grid container. This allows for fine-grained control over the grid's structure and appearance.

```javascript
let theme = PrelineTheme;
theme.grid.container = MyTableContainer;
```

--------------------------------

### Hide/Show Columns in GridCraft (Svelte)

Source: https://gridcraft.mediakular.com/docs/columns

This example shows how to hide a column by setting its 'visible' property to false in the GridColumn definition. This is useful for initially hiding columns that the user can later choose to display, improving initial table usability.

```typescript
let columns: GridColumn<Client>[] = [
    {
        key: 'firstname',
        title: 'First Name',
        visible: false
    },
];
```

--------------------------------

### Overwrite GridCraft Theme Component

Source: https://gridcraft.mediakular.com/docs/theming

This example demonstrates how to overwrite a specific component of an existing GridCraft theme, such as replacing the default grid container with a custom one. You import the base theme and then assign your custom component to the desired theme property before passing the modified theme to the Grid component.

```svelte
<script>
  import { Grid, PlainTableTheme } from "@mediakular/gridcraft";
  import MyTableContainer from "$lib/components/grid/theme/MyTableContainer.svelte";

  let theme = PlainTableTheme;
  theme.grid.container = MyTableContainer;
</script>

<Grid ... {theme} />
```

--------------------------------

### Calculated Columns with Accessor and Custom Component in GridCraft

Source: https://gridcraft.mediakular.com/docs/columns

This example shows how to create calculated columns in GridCraft using the 'accessor' function property. This is useful for transforming or combining data from row properties before rendering. A custom component like 'CurrencyCell' can then be used to display the calculated value, such as a total price.

```svelte
interface Product {
    // ...
    amount: number;
    quantity: number;
}

let columns: GridColumn<Product>[] = [
    // ...
    {
        key: 'total',
        title: 'Total Price',
        accessor: (row: Product) => { return row.amount * row.quantity },
        renderComponent: CurrencyCell // Our custom column cell component to render a calculated cell and formatted currency
    },
    // ...
];Copy
```

```svelte
<script>
  export let value: number;
  let formattedCurrency: string;

  $: formattedCurrency = value ? value.toFixed(2) : "-";
</script>

<div>${formattedCurrency}</div>Copy
```

--------------------------------

### Custom Sort Value for GridCraft Columns (Svelte)

Source: https://gridcraft.mediakular.com/docs/columns

This example illustrates how to define a custom 'sortValue' function for a column. This function is used for sorting instead of the actual cell value, particularly useful when the cell value is an object or not directly sortable, like an HTMLImageElement.

```typescript
interface Image {
    file: HTMLImageElement;
    filename: string;
}

let columns: GridColumn<Image>[] = [
    {
        key: 'file',  // Here we define the file-property as column value
        title: 'File Object',
        sortValue: (row: Image) => row.filename, //... but here we say we want to sort by filename
        renderComponent: HtmlImageCell
    },
];
```

--------------------------------

### Inline-Editable Text Column

Source: https://gridcraft.mediakular.com/docs/columns

Implements inline editing for a text column in GridCraft. This requires a custom column implementation where edit and save buttons are displayed, allowing users to modify cell content directly. The example shows the basic column definition for an editable 'firstname' field.

```html
<script>
let columns = [
    ...
    {
        key: 'firstname',
        title: 'First name',
    },
    ...
]

</script>
```

--------------------------------

### Importing Theme Components in GridCraft

Source: https://gridcraft.mediakular.com/docs/theming

Demonstrates how to import core GridCraft components and a predefined theme (PrelineTheme) for use in SvelteKit applications. This is the initial step for applying any theme.

```javascript
import { Grid, PrelineTheme /* Optional: GridFooter, GridPaging */ } from "@mediakular/gridcraft";
```

--------------------------------

### Column API Documentation

Source: https://gridcraft.mediakular.com/docs/api-column

This API provides a comprehensive set of options for defining and customizing columns within a data grid, allowing for flexible and interactive presentation of data in SvelteKit applications.

```APIDOC
## Column API

### Description
The Column API in GridCraft allows you to define and customize the columns for your data grid, offering various properties for column configuration and rendering.

### Properties
The GridColumn type in GridCraft represents the configuration options for defining columns in a data grid.

#### Key Properties
- **key** (string) - Required - The key or property name from the data object.
- **title** (string) - Optional - The title or label for the column. Default: ""

#### Visibility and Sorting
- **visible** (boolean?) - Optional - Indicates whether the column is initially visible.
- **sortable** (boolean?) - Optional - Indicates whether the column is sortable.

#### Sizing and Rendering
- **width** (number | string) - Optional - The width of the column.
- **renderComponent** (ComponentType?) - Optional - The custom Svelte component for rendering the column.

#### Data Access and Sorting Logic
- **accessor** ((row: T) => unknown) - Optional - The accessor function for accessing the column value.
- **sortValue** ((row: T) => string | number | Date) - Optional - The function to determine the value used for sorting the column.
```

--------------------------------

### Assigning a Theme to GridCraft Components

Source: https://gridcraft.mediakular.com/docs/theming

Illustrates how to apply a theme object to GridCraft's main components like Grid, GridFooter, and GridPaging. This step integrates the chosen or customized theme into the grid's rendering.

```svelte
<Grid ... {theme} />
<GridFooter ... {theme} />
<GridPaging ... {theme} />
```

--------------------------------

### Configure Grouping in Grid Component (SvelteKit)

Source: https://gridcraft.mediakular.com/docs/grouping

This snippet demonstrates how to enable grouping in a GridCraft data grid by setting the `groupby` property on the `<Grid>` component. The `groupby` value must correspond to a defined column key, allowing for organized data display and analysis within SvelteKit applications.

```svelte
<Grid 
    bind:data={clients} 
    ...
    groupby={columnKey} />
```

--------------------------------

### Grid Component Properties

Source: https://gridcraft.mediakular.com/docs/api-grid

This section details the various properties available for configuring the Grid component, including data handling, column definitions, filtering, sorting, and UI elements.

```APIDOC
## Grid Component Properties

### Description
This section details the various properties available for configuring the Grid component, including data handling, column definitions, filtering, sorting, and UI elements.

### Properties

#### `data`
- **Type**: `Iterable<T>` | `ArrayLike<T>`
- **Default**: `[]`
- **Description**: The data to be displayed in the grid.

#### `dataUnpaged`
- **Type**: `Iterable<T>` | `ArrayLike<T>`
- **Default**: `[]`
- **Description**: Same as `data` but not cut for paging. Used for exports.

#### `columns`
- **Type**: `GridColumn<T>[]`
- **Default**: `[]`
- **Description**: An array of column definitions for the grid.

#### `filters`
- **Type**: `GridFilter[]`
- **Default**: `[]`
- **Description**: An array of filter definitions to apply to the grid data.

#### `groupBy`
- **Type**: `string`
- **Default**: `""`
- **Description**: The default grouping column for the grid.

#### `sortByColumn`
- **Type**: `string`
- **Default**: `""`
- **Description**: The column used for sorting the grid data.

#### `sortOrder`
- **Type**: `number`
- **Default**: `1`
- **Description**: The sort order for the grid data (1 for ascending, -1 for descending).

#### `showCheckboxes`
- **Type**: `boolean`
- **Default**: `false`
- **Description**: Indicates whether checkboxes for row selection are displayed.

#### `groupsExpandedDefault`
- **Type**: `boolean`
- **Default**: `true`
- **Description**: Determines whether group headers are expanded by default.

#### `selectedRows`
- **Type**: `T[]`
- **Default**: `[]`
- **Description**: An array of selected rows in the grid.
```

--------------------------------

### Implement Checkbox Filter in Gridcraft (Svelte)

Source: https://gridcraft.mediakular.com/docs/filtering

Implements checkbox filters for GridCraft tables, enabling users to filter data based on the 'status' field (e.g., 'active', 'inactive', 'pending'). Each checkbox controls the activation state of a corresponding filter, allowing users to toggle which statuses are visible.

```svelte
<script>
    import { Grid, type GridFilter } from "@mediakular/gridcraft";

    interface Client {
        //...
        status: 'active' | 'inactive' | 'pending'; 
    }

    export let data: PageData;
    let clients: Client[] = data.clients;

    let filters: GridFilter[];
    $: filters = [
        // Define checkbox filters
        { key: "status-active", columns: "status", filter: (val: any) => { return val != "active" }, active: false },
        { key: "status-inactive", columns: "status", filter: (val: any) => { return val != "inactive" }, active: false },
        { key: "status-pending", columns: "status", filter: (val: any) => { return val != "pending" }, active: false },
    ];
    
    // in this case we need to negate the value
    $: activeFilterActive = !filters[0].active;
    $: inactiveFilterActive = !filters[1].active;
    $: pendingFilterActive = !filters[2].active;
</script>

<!-- Checkbox Inputs -->
<label for="status-active">
    <input type="checkbox" bind:checked={activeFilterActive} on:click={() => filters[0].active = !filters[0].active} id="status-active">
    Active
</label>
<label for="status-inactive">
    <input type="checkbox" bind:checked={inactiveFilterActive} on:click={() => filters[1].active = !filters[1].active} id="status-inactive">
    Inactive
</label>
<label for="status-pending">
    <input type="checkbox" bind:checked={pendingFilterActive} on:click={() => filters[2].active = !filters[2].active} id="status-pending">
    Pending
</label>

<Grid 
    bind:data={clients} 
    bind:filters />
```

--------------------------------

### GridCraft Theme Type Definition

Source: https://gridcraft.mediakular.com/docs/theming

This TypeScript type definition outlines the structure of a GridCraft theme. It specifies the components that can be customized for the grid (container, header, groupby, body) and other elements like the footer and paging. Developers can use this as a reference when creating or modifying themes.

```typescript
export type GridTheme = {
    grid: {
        container: ComponentType;
        header: {
            container: ComponentType,
            row: ComponentType,
            content: ComponentType,
            checkbox: ComponentType,
            sortIndicator: ComponentType,
        },
        groupby: {
            container: ComponentType,
            checkbox: ComponentType,
            cell: ComponentType,
            content: ComponentType,
            rowsCount: ComponentType,
        },
        body: {
            container: ComponentType,
            row: ComponentType,
            cell: ComponentType,
            checkbox: ComponentType,
            content: ComponentType
        }
    }
    footer: ComponentType;
    paging: ComponentType;
}
```

--------------------------------

### Gridcraft Mediakular CSS Customization Variables

Source: https://gridcraft.mediakular.com/docs/theming

This snippet showcases the CSS custom properties used to customize the appearance of the Gridcraft Mediakular component. It covers variables for transitions, table elements, headers, data cells, rows (including grouped and selected states), and footer elements. These variables allow for fine-grained control over the visual presentation of the grid.

```css
--gc-transitions: all 0.2s ease-in-out;

--gc-table-bg-color: var(--gc-main-color);
--gc-table-color: var(--gc-text-color);
--gc-table-header-bg-color: var(--gc-main-color);
--gc-table-radius: 5px;

--gc-th-padding: 0.5rem 0.75rem;
--gc-th-gap: 0.25rem;
--gc-th-color: var(--gc-text-color);
--gc-th-text-transform: uppercase;
--gc-th-text-align: left;
--gc-th-font-size: small;
--gc-th-tr-border: 1px solid var(--gc-secondary-color);

--gc-td-padding: 0.5rem 0.75rem;
--gc-td-text-align: left;
--gc-td-text-align-checkbox: center;

--gc-td-content-font-size: small;
--gc-td-content-color: var(--gc-text-color);
--gc-td-content-color-odd: var(--gc-text-color);

--gc-tr-border: 1px solid var(--gc-main-color);
--gc-tr-bg-color: var(--gc-secondary-color);
--gc-tr-bg-color-odd: var(--gc-secondary-color);
--gc-tr-bg-color-selected: var(--gc-color-selected);

--gc-tr-groupby-border: 1px solid var(--gc-secondary-color);

--gc-tr-groupby-bg-color: var(--gc-main-color);
--gc-td-groupby-content-color: var(--gc-text-color);
--gc-td-groupby-padding: 0.5rem 0.75rem;
--gc-td-groupby-gap: 0.25rem;
--gc-tr-groupby-selected-bg: var(--gc-color-selected);

--gc-footer-gap: 1rem;
--gc-footer-justify: flex-end;
--gc-footer-margin: 0.5rem 0;
--gc-footer-padding: 0.5rem 0.75rem;
--gc-footer-border-radius: 0.25rem;
--gc-footer-font-size: 0.875rem;

--gc-footer-button-gap: 0.5rem;
--gc-footer-button-border-radius: 0.25rem;
--gc-footer-button-padding: 0.5rem 0.75rem;
--gc-footer-bg-color: var(--gc-secondary-color);
--gc-footer-border: 1px solid var(--gc-main-color);

```

--------------------------------

### Import Gridcraft Grid and GridFilter Type

Source: https://gridcraft.mediakular.com/docs/filtering

Imports the Grid component and the GridFilter type from the GridCraft package, essential for implementing custom filters.

```typescript
import { Grid, type GridFilter } from "@mediakular/gridcraft";
```

--------------------------------

### Custom Svelte Component for Date Formatting in GridCraft

Source: https://gridcraft.mediakular.com/docs/columns

This snippet demonstrates how to define a custom column in GridCraft using a Svelte component to format date values. It requires importing the Grid component and defining a GridColumn with a renderComponent property pointing to a custom Svelte component like 'DateCell'.

```svelte
<script>
import { Grid, type GridColumn } from "@mediakular/gridcraft";
// Import your custom Svelte component for rendering a formatted date
import DateCell from "$lib/components/DateCell.svelte";

interface Client {
    // ...
    birthdate: Date;
}

export let data: PageData;
let clients: Client[] = data.clients;

let columns: GridColumn<Client>[] = [
    // ...
    {
        key: 'birthdate',
        title: 'Birthday',
        renderComponent: DateCell // Custom Svelte component for rendering a formatted date
    },
    // ...
];
</script>

<Grid
    bind:data={clients}
    bind:columns />Copy
```

```svelte
<script>
  export let value: Date;
  let dateStr: string;

  $:dateStr = value ? (new Date(value)).toLocaleDateString('en-US') : "-";
</script>

<div>{dateStr}</div>Copy
```

--------------------------------

### Configure Tailwind for Preline Theme

Source: https://gridcraft.mediakular.com/docs/theming

This configuration is necessary to enable the Preline theme in GridCraft. It ensures that all Svelte component classes within the Preline theme are correctly indexed by Tailwind CSS. Ensure your Tailwind configuration includes the path to the Preline theme's Svelte components.

```javascript
export default {
  content: [
    ...
    './node_modules/@mediakular/gridcraft/dist/themes/preline/**/*.svelte'
    //or: './node_modules/@mediakular/gridcraft/dist/themes/**/*.svelte' in order to support all themes
  ],
  theme: {
    extend: {},
  },
  plugins: [
    ...
  ],
}
```

--------------------------------

### GridFilter API Configuration

Source: https://gridcraft.mediakular.com/docs/api-filter

The GridFilter API allows for custom filtering in SvelteKit applications. It requires properties such as a unique key, target columns, a filter function to evaluate row inclusion, and an active status.

```javascript
{
  key: "uniqueFilterId",
  columns: "all" | string | string[],
  filter: (columnValue: unknown, columnKey: string) => boolean,
  active: boolean
}
```

--------------------------------

### Define Simple Custom Columns in GridCraft (Svelte)

Source: https://gridcraft.mediakular.com/docs/columns

This snippet demonstrates how to define an array of GridColumn objects to customize columns in a GridCraft data table. Each object specifies the 'key' for the data property and the 'title' for the column header. This is the basic method for setting up columns in your Grid component.

```typescript
import { Grid, type GridColumn } from "@mediakular/gridcraft";

// Example interface
interface Client {
    id: string;
    firstname: string;
    lastname: string;
    age: number;
    birthdate: Date;
}

export let data: PageData;

let clients: Client[] = data.clients;

let columns: GridColumn<Client>[] = [
    {
        key: 'firstname',
        title: 'First Name'
    },
    {
        key: 'lastname',
        title: 'Last Name'
    },
    {
        key: 'age',
        title: 'Age'
    },
    {
        key: 'birthdate',
        title: 'Birthday'
    }
];
```

```html
<Grid 
    bind:data={clients} 
    bind:columns />
```

--------------------------------

### Implement Text Search Filter in Gridcraft (Svelte)

Source: https://gridcraft.mediakular.com/docs/filtering

Implements a text search filter for GridCraft tables, allowing users to filter data entries based on input text matching values in specified columns (e.g., 'firstname', 'lastname', 'age'). The filter is active only when the search term is not empty.

```svelte
<script>
    import { Grid, type GridFilter } from "@mediakular/gridcraft";

    interface Client {
        id: string;
        firstname: string;
        lastname: string;
        age: number;
    }

    export let data: PageData;
    let clients: Client[] = data.clients;
    
    let textSearch = "";
    
    let filters: GridFilter[];
    $: filters = [
        // Define text search filter
        {
            key: "text-search",
            columns: ["firstname", "lastname", "age"],
            filter: (row: any, colKey: string) => {
                const search = (val: string | null) => val != undefined && val.toString().toLocaleLowerCase().includes(textSearch.toLocaleLowerCase());
                return search(row)
            }, 
            active: (textSearch && textSearch.length > 0) ? true : false
        }
    ];
</script>

<!-- Text Search Input -->
<input type="text" placeholder="Enter Filter Term (Firstname, Lastname, or Age)" bind:value={textSearch} />

<Grid 
    bind:data={clients} 
    bind:filters />
```

--------------------------------

### Custom Object Handling with Accessor and SortValue in GridCraft

Source: https://gridcraft.mediakular.com/docs/columns

This snippet illustrates handling custom objects within GridCraft columns, particularly when the 'accessor' function returns an object. Since the default sorting mechanism won't work with objects, a 'sortValue' function must be provided to define how the column should be sorted. A custom component like 'ClientCell' is used for rendering.

```svelte
import ClientCell from "$lib/components/ClientCell.svelte";

interface Client {
    // ...
    avatar: string;
    firstname: string;
    lastname: string;
    email: string;
}

let columns: GridColumn<Client>[] = [
    //...
    {
        key: 'name',
        title: 'Client',
        // Use an accessor to transform row data, which can be used in your custom renderComponent
        accessor: (row: Client) => {
            return {
                avatar: row.avatar,
                firstname: row.firstname,
                lastname: row.lastname,
                email: row.email
            }
        },
        // as the default search will not work with our accessor data, we have to provide a sortValue which will be used for sorting
        sortValue: (row: Client) => {
            return `${row.firstname} ${row.lastname}`
        },
        renderComponent: ClientCell // Our custom column cell component to render a column with avatar, full name and email
    }
];Copy
```

```svelte
<script>
    export let avatar: string;
    export let firstname: string;
    export let lastname: string;
    export let email: string;

    $: fullname = `${firstname} ${lastname}`;
</script>

<div class="my-client-cell">
    <img src="{avatar}" alt="{fullname}" />
    <div>
        <span>{fullname}</span>
        {#if email}
            <span>{email}</span>
        {/if}
    </div>
</div>Copy
```

--------------------------------

### Progress Bar Column with Svelte

Source: https://gridcraft.mediakular.com/docs/columns

Displays data as a progress bar in a GridCraft table column. It requires a Svelte component (ProgressCell.svelte) to render the visual progress. The accessor function transforms row data into a format suitable for the progress bar, and sortValue ensures correct sorting.

```typescript
import ProgressCell from "$lib/components/ProgressCell.svelte";

interface Project {
    // ...
    progress: number;
}

let maxProgress = 10;

let columns: GridColumn<Project>[] = [
    //...
    {
        key: 'progress',
        title: 'Progress',
        // We will use the accessor function to transform or row data, which will be used in our custom renderComponent
        accessor: (row: Project) => {
            return {
                value: row.progress,
                max: row.maxProgress
            }
        },
        // as the default search will not work with our accessor data, we have to provide a sortValue which will be used for sorting
        sortValue: (row: Project) => {
            return row.progress;
        },
        renderComponent: ProgressCell
    }
];
```

```svelte
<script>
    export let max: number;
    export let value: number | undefined;
    value = value || 0;

    const percent = 100 / max * value;
</script>

<div>
    <span>{percent} % ({value} / {max})</span>
    <progress value={value} max={max}>{percent} %</progress>
</div>
```

--------------------------------

### Configure Tailwind for CardsPlus Theme

Source: https://gridcraft.mediakular.com/docs/theming

This configuration is required to use the CardsPlus theme in GridCraft. It tells Tailwind CSS to scan the Svelte components of the CardsPlus theme, ensuring all necessary utility classes are generated. Make sure the content array in your Tailwind configuration includes the path to the CardsPlus theme's Svelte files.

```javascript
export default {
  content: [
    ...
    './node_modules/@mediakular/gridcraft/dist/themes/cards-plus/**/*.svelte'
     //or: './node_modules/@mediakular/gridcraft/dist/themes/**/*.svelte' in order to support all themes
  ],
  theme: {
    extend: {},
  },
  plugins: [
    ...
  ],
}
```

--------------------------------

### Define Grid Column with Custom Render Component

Source: https://gridcraft.mediakular.com/docs/columns

This snippet demonstrates how to configure a grid column in Svelte, specifying a unique key, title, and a custom Svelte component (`FirstnameEditCell.svelte`) to render the cell content. This component is referenced via the `renderComponent` property.

```svelte
<script>
import FirstnameEditCell from "$lib/components/grid/cells/FirstnameEditCell.svelte"

let columns = [
    ...
    {
        key: 'firstname',
        title: 'First name',
        renderComponent: FirstnameEditCell
    },
    ...
]

</script>
ClientCell.svelte
```

--------------------------------

### Custom Sort Value with Accessor in GridCraft (Svelte)

Source: https://gridcraft.mediakular.com/docs/columns

This code shows how to implement a custom 'sortValue' function when an 'accessor' function is also defined for a column. The 'sortValue' function provides a string representation of the combined firstname and lastname for sorting purposes, ensuring correct sorting even when the accessor returns an object.

```typescript
let columns: GridColumn<Client>[] = [
    {
        //...
        accessor: (row: Client) => {
            return {
                firstname: row.firstname,
                lastname: row.lastname,
            }
        }, 
        sortValue: (row: Client) => {
            return `${row.firstname} ${row.lastname}`
        }
    },
];
```

--------------------------------

### Overriding PlainTableCssTheme Variables for Dark Mode

Source: https://gridcraft.mediakular.com/docs/theming

Demonstrates how to override CSS variables for the PlainTableCssTheme in GridCraft to customize both light and dark mode appearances. This method allows for theme adjustments directly within HTML or global CSS.

```css
html { /* or :global(html) when in component context*/
    /* Light Mode */
    --gc-main-color: #e2e8f0;
    --gc-secondary-color: #f1f5f9;
    --gc-tertiary-color:white;
    --gc-text-color: #2a2a2a;
    --gc-color-selected: #bae6fd88;
}

html.dark { /* or :global(html.dark) when in component context*/
    /* Dark Mode */
    --gc-main-color: #1e293b;
    --gc-secondary-color: #334155;
    --gc-tertiary-color: #293647;
    --gc-text-color: #e8e7e7;
    --gc-color-selected: #155e75cc;
}
```

--------------------------------

### Enable Grid Row Selection with showCheckboxes

Source: https://gridcraft.mediakular.com/docs/rowselection

To enable row selection in GridCraft tables, set the `showCheckboxes` property to `true` in the `Grid` component. This makes checkboxes visible for each row.

```svelte
<Grid 
    bind:data={clients} 
    ...
    showCheckboxes="true" />
```

--------------------------------

### Bind Filters to Gridcraft Grid Component

Source: https://gridcraft.mediakular.com/docs/filtering

Binds the reactive `filters` variable to the `filters` property of the Grid component. This enables the Grid to utilize the defined filters for data manipulation and display.

```svelte
<Grid 
    bind:data={clients} 
    ...
    bind:filters />
```

--------------------------------

### Bind Selected Rows to a Variable

Source: https://gridcraft.mediakular.com/docs/rowselection

Bind a variable to the `selectedRows` property of the `Grid` component to store all rows selected by the user. This variable must be an array of the same type as your data.

```svelte
<script>
    let mySelectedRows: Client[] = [];
</script>

<Grid 
    bind:data={clients} 
    bind:selectedRows={mySelectedRows}
    showCheckboxes="true" />
```

--------------------------------

### Svelte Inline Edit Cell Component Logic

Source: https://gridcraft.mediakular.com/docs/columns

This Svelte component (`FirstnameEditCell.svelte`) implements the inline editing interface for a grid cell. It toggles between displaying the cell value and an input field for editing. The `onSaveChanges` function is called when the user clicks 'Save', passing the new value.

```svelte
<script>
    export let value: string;
	export let onSaveChanges: (newFirstname:number) => void;
	
	let isEdit = false;

	function handleSaveChanges() {
		onSaveChanges(value);
	}
</script>

{#if !isEdit}
    <span>{value ? value : '-'}</span>
    <button on:click|preventDefault={() => isEdit = true}>
       Edit
    </button>
{:else}
    <input type="text" bind:value />
    <button on:click={() => { isEdit = false; handleEditClick() }}>
        Save
    </button>
{/if}
```

--------------------------------

### Action Column with Svelte Components

Source: https://gridcraft.mediakular.com/docs/columns

Adds an action column to a GridCraft table, enabling user interactions like editing or performing other custom actions. It uses a Svelte component (EditActionsCell.svelte) to render buttons or links for these actions. The accessor function passes row data and callback functions to the component.

```typescript
import EditActionsCell from "$lib/components/EditActionsCell.svelte"

let columns: GridColumn<Client>[] = [
    // Other column definitions...
    {
        key: 'actions', // can be any name
        title: 'Client Actions',
        sortable: false,
        accessor: (row: Client) => {
            return {
                value: row,
                editClicked: (row: Client) => {  
                    // Perform any action here using any row values (like row.id)
                },
                somethingElseClicked: (row: Client) => {  
                    // Perform another action here
                },
            }
        },
        renderComponent: EditActionsCell
    }
];
```

```svelte
<script>
    type T = $$Generic<any>;

    export let value: T;
    export let editClicked: (value: T) => void;
    export let somethingElseClicked: (value: T) => void;

    function handleEditClick() {
        editClicked(value);
    }

    function handleSomeOtherClick() {
        somethingElseClicked(value);
    }
</script>

<button on:click|preventDefault={handleEditClick}>
    Edit
</button>
<a href="#" on:click|preventDefault={handleSomeOtherClick}>
    Something else
</a>
```

--------------------------------

### Define Reactive Filters for Gridcraft

Source: https://gridcraft.mediakular.com/docs/filtering

Defines a reactive variable `filters` of type `GridFilter[]` to hold all active filters. This variable is updated dynamically as filters are applied or removed, enabling real-time filtering in the Grid component.

```typescript
let filters: GridFilter[];
$: filters = [ /* Define all filters here */ ];
```

--------------------------------

### Define Custom Filter Logic in Gridcraft

Source: https://gridcraft.mediakular.com/docs/filtering

Defines custom filter functions for each filter, specifying which rows should be displayed based on defined criteria. The `filter` function within a `GridFilter` object takes the row data and column key as input and should return `true` to include the row or `false` to exclude it.

```typescript
$: filters = [
    {
        key: "my-filter",
        columns: ["column1", "column2"],
        filter: (row: any, colKey: string) => { 
            // Filter logic here
            // return true/false
        }, 
        active: true // Set to true to activate the filter, false to ignore
    }
]
```

--------------------------------

### Disable Column Sorting in GridCraft (Svelte)

Source: https://gridcraft.mediakular.com/docs/columns

This snippet demonstrates how to disable sorting for a specific column by setting the 'sortable' property to false in the GridColumn definition. By default, all columns are sortable.

```typescript
let columns: GridColumn<Client>[] = [
    {
        key: 'firstname',
        title: 'First Name',
        sortable: false
    },
];
```
Tokens:
Raw