### Create React App and Install ZingGrid Source: https://www.zinggrid.com/docs/integrations/js-frameworks-%26-libs/react Use npx to create a new React app, navigate into the directory, install ZingGrid, and start the development server. ```bash npx create-react-app zinggrid-react-helloworld cd zinggrid-react-helloworld npm install zinggrid npm start ``` -------------------------------- ### Basic Button Column Setup Source: https://www.zinggrid.com/docs/guides/column This example demonstrates a basic setup for a 'button' column type without specific styling or advanced configurations. It relies on the default button rendering. ```html ZingGrid Demo

The 'button' column type renders a button and cell editor is disabled, but modal editor contains fields for indices used to render button (label, disabled, icon, url).

``` -------------------------------- ### Basic Remote Data Grid Setup Source: https://www.zinggrid.com/docs/crud/read A minimal HTML example for setting up a ZingGrid to load data from a remote source without additional styling or license setup. ```html ZingGrid: Blank Grid ``` -------------------------------- ### Basic ZingGrid Setup with Aggregate Source: https://www.zinggrid.com/docs/features/aggregation This HTML example demonstrates a minimal ZingGrid setup, including data and a column configured to calculate and display an average in the footer. It omits custom styling and license key for brevity. ```html ZingGrid: Simple Grid

Grand Total Grid

Here is a complete grid with the grand total displayed in the grid:

``` -------------------------------- ### Basic Firebase Adapter Example Source: https://www.zinggrid.com/docs/features/adapters A minimal HTML example showing the Firebase adapter setup for ZingGrid without additional styling or scripts. ```html ZingGrid Demo

`[adapter]` sets the options for 3rd party datasets. In this demo, setting `[adapter="firebase"]` requires no additional options to use dataset hosted from Firebase.

``` -------------------------------- ### Basic Grid Setup with Column Dragging Source: https://www.zinggrid.com/docs/features/frozen-columns A simplified HTML example demonstrating column dragging with frozen columns, omitting the specific styling and license key for a cleaner setup. ```html ZingGrid: Blank Grid

`When `column-drag` is enabled, you can drag columns in and out of the frozen area.

Frozen Columns + Dragging Demo ``` -------------------------------- ### Full ZingGrid Example with Aggregations Source: https://www.zinggrid.com/docs/features/aggregation This example demonstrates a complete ZingGrid setup with data and multiple columns configured for aggregation. It includes currency and number formatting for footers. ```html ZingGrid: Simple Grid ``` -------------------------------- ### Full HTML Example with Custom State Functions Source: https://www.zinggrid.com/docs/features/grid-state-persistence This example shows a complete HTML page with a ZingGrid configured to use custom functions for saving and loading its state. It includes styling and license setup. ```html ZingGrid Demo ``` -------------------------------- ### Render Your First ZingGrid Source: https://www.zinggrid.com/docs/getting-started This example demonstrates how to set up a basic HTML page with ZingGrid, including the script reference, CSS for styling, and the zing-grid component with sample data. It also includes license key setup and a window load event listener. ```html ZingGrid: Docs Getting Started ``` -------------------------------- ### Minimal ZingGrid Setup Source: https://www.zinggrid.com/docs/data/rest This example demonstrates a minimal HTML structure for a ZingGrid component, including the script tag for the library and inline data. ```html ZingGrid: Blank Grid ``` -------------------------------- ### Basic ZingGrid Usage Source: https://www.zinggrid.com/docs/api/tags/zing-grid This example demonstrates the basic setup of a ZingGrid component, including setting the data source, caption, and enabling pagination with a specified page size. ```html ``` -------------------------------- ### Basic Server Connected Grid Setup Source: https://www.zinggrid.com/docs/features/server-features This minimal example sets up a ZingGrid to fetch data from a server endpoint. It defines the data source and the path to the records within the JSON response. This is useful for quickly displaying remote data. ```html ZingSoft Demo ZingGrid Star Wars Reload Demo ``` -------------------------------- ### Full HTML Example with Specific State Preservation Source: https://www.zinggrid.com/docs/features/grid-state-persistence This example demonstrates a complete HTML page that includes a ZingGrid with specific state options preserved. It also includes basic styling and license key setup. ```html ZingGrid Demo ``` -------------------------------- ### Basic ZingGrid Implementation Source: https://www.zinggrid.com/docs/features This HTML example shows a basic ZingGrid setup. It includes the script reference and places the grid component in the body. The grid is configured with essential features like caption, sorting, searching, and pagination, and is populated with sample data. ```html ZingGrid: Docs Getting Started ``` -------------------------------- ### Full HTML Example with Reset Button and Initial Filter Source: https://www.zinggrid.com/docs/features/filtering This example demonstrates a complete ZingGrid setup with a button to reset filters and initial filtering applied on load. It includes necessary HTML structure, CSS, and JavaScript. ```html ZingGrid: Simple Grid ``` -------------------------------- ### Basic HTML Example with ZingGrid Source: https://www.zinggrid.com/docs/guides/attribute-vs-element A minimal HTML setup for ZingGrid, including the script tag for the library and the grid component with data and caption. ```html ZingGrid Demo Alternate Caption ``` -------------------------------- ### Complete Grid with Static Context Menu Source: https://www.zinggrid.com/docs/features/context-menu This example shows a full HTML page setup for a ZingGrid with a static context menu enabled. It includes necessary imports, basic styling, and grid configuration with data. ```html ZingGrid Demo ``` -------------------------------- ### ZingGrid with Array Data (Minimal) Source: https://www.zinggrid.com/docs/features/data This example demonstrates a basic ZingGrid setup with data provided as an array of arrays. It includes the essential HTML structure and the ZingGrid script, but omits custom styling. ```html ZingGrid Demo ``` -------------------------------- ### Basic HTML Example with Default Loading Screen Source: https://www.zinggrid.com/docs/features/loading-screen A minimal HTML structure to showcase the ZingGrid's default loading screen without additional styling or license setup. ```html ZingGrid Demo ``` -------------------------------- ### Basic ZingGrid Setup for Slotted Content Example Source: https://www.zinggrid.com/docs/features/button This is a foundational HTML structure for a ZingGrid, including the necessary script tag for ZingGrid. It sets up a basic grid with data and a placeholder for custom columns, suitable for demonstrating slotted content. ```html ZingGrid Demo ZingGrid Demo ``` -------------------------------- ### Enable Default Editor in ZingGrid Source: https://www.zinggrid.com/docs/features/editing This example shows a complete ZingGrid setup with the default editor enabled. It includes basic styling and data configuration. Ensure ZingGrid is loaded via CDN and the license is set. ```html ZingGrid: Simple Grid ``` -------------------------------- ### Complete ZingGrid with Keyboard Navigation Enabled Source: https://www.zinggrid.com/docs/features/accessibility This example demonstrates a fully configured ZingGrid with keyboard navigation enabled. It includes the necessary HTML structure, script reference, and inline styles for a complete, accessible grid setup. The license key is set within the script. ```html ZingGrid: Docs Getting Started ``` -------------------------------- ### Foot Methods Example Source: https://www.zinggrid.com/docs/api/methods/all Shows an example of getting the foot-class attribute from a ZingGrid component. This is part of the footer manipulation methods. ```javascript const zgRef = document.querySelector('zing-grid'); zgRef.getFootClass(); ``` -------------------------------- ### Dexie Cloud Setup and Initialization Source: https://www.zinggrid.com/docs/data/dexie-cloud Import necessary Dexie modules, create a database instance, define table schema, configure the cloud endpoint, register clients with ZingGrid, and initiate cloud synchronization. ```javascript import Dexie from 'dexie'; import dexieCloud from 'dexie-cloud-addon'; import { liveQuery } from 'dexie'; const db = new Dexie('EmployeeDB', { addons: [dexieCloud] }); db.version(1).stores({ employees: '@id, first_name, last_name, title', }); db.cloud.configure({ databaseUrl: 'https://zaojoytna.dexie.cloud', }); ZingGrid.registerClient(db); ZingGrid.registerClient(liveQuery, 'subscription'); // Sync with Dexie Cloud db.cloud.sync(); ``` -------------------------------- ### Get Template Start Delimiter Source: https://www.zinggrid.com/docs/api/methods/all Retrieves the value of the `template-start-delimiter` attribute from the ZingGrid component. ```javascript zgRef.getTemplateStartDelimiter(); ``` -------------------------------- ### Basic ZingGrid Setup Source: https://www.zinggrid.com/docs/features/layouts This HTML snippet demonstrates a minimal ZingGrid setup with player data and column definitions, including the necessary ZingGrid script. It serves as a foundation for displaying tabular data. ```html ZingGrid: Simple Grid ``` -------------------------------- ### Minimal ZingGrid Setup with Built-in Filterers Source: https://www.zinggrid.com/docs/features/filtering A minimal HTML setup for ZingGrid that includes basic styling and column definitions with specified built-in filterers. This example omits the data for brevity. ```html ZingGrid Demo