### Installing canvas-datagrid with npm (Console)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/getting-started.md

Installs the canvas-datagrid library using the Node Package Manager (npm). This command downloads the package and its dependencies into your project's node_modules directory, making it available for use in your application.

```console
npm install canvas-datagrid
```

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

### Including canvas-datagrid via CDN script tag (HTML)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/getting-started.md

Includes the canvas-datagrid library in an HTML page by linking directly to a CDN (Content Delivery Network) like unpkg.com. This approach simplifies setup by eliminating the need for local file management and leverages CDN caching for faster loading.

```html
<script src="https://unpkg.com/canvas-datagrid"></script>
```

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

### Initializing canvas-datagrid with pure JavaScript

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/getting-started.md

Demonstrates how to create and append a canvas-datagrid instance to the document body using pure JavaScript. It then populates the grid with sample data, showcasing basic programmatic data assignment.

```javascript
var grid = canvasDatagrid();

document.body.appendChild(grid);

grid.data = [
  { col1: 'row 1 column 1', col2: 'row 1 column 2', col3: 'row 1 column 3' },
  { col1: 'row 2 column 1', col2: 'row 2 column 2', col3: 'row 2 column 3' }
];
```

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

### Including canvas-datagrid via local script tag (HTML)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/getting-started.md

Includes the canvas-datagrid library in an HTML page by referencing a local JavaScript file. This method requires the canvas-datagrid.js file to be present in the specified dist directory relative to the HTML document.

```html
<script src="dist/canvas-datagrid.js"></script>
```

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

### Using canvas-datagrid as a Web Component with inline HTML data

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/getting-started.md

Illustrates how to declare a canvas-datagrid directly in HTML as a web component, providing initial data directly within the component's content. This method allows for declarative grid setup and styling via CSS classes.

```html
<canvas-datagrid class="myGridStyle" data="data can go here too">
  [
    {"col1": "row 1 column 1", "col2": "row 1 column 2", "col3": "row 1 column 3"},
    {"col1": "row 2 column 1", "col2": "row 2 column 2", "col3": "row 2 column 3"}
  ]
</canvas-datagrid>
```

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

### Creating canvas-datagrid Web Component programmatically with JavaScript

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/getting-started.md

Shows how to create an instance of the canvas-datagrid web component programmatically using JavaScript's document.createElement. This approach provides more control over the component's lifecycle and allows dynamic data assignment.

```javascript
const grid = document.createElement('canvas-datagrid');

grid.data = [
  { col1: 'row 1 column 1', col2: 'row 1 column 2', col3: 'row 1 column 3' },
  { col1: 'row 2 column 1', col2: 'row 2 column 2', col3: 'row 2 column 3' }
];
```

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

### Installing Development Dependencies - npm - Shell

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/building-and-testing.md

This command installs all necessary development dependencies required to build or test the project. It fetches packages listed in the project's `package.json` file.

```Shell
npm install
```

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

### Instantiating Grid with Parameters (JavaScript)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/tutorials/canvasDatagrid.md

Demonstrates how to instantiate a canvas-datagrid instance using JavaScript, passing initial attributes as parameters in the configuration object. This allows for programmatic setup of grid properties.

```JavaScript
var myGrid = canvasDatagrid({someAttribute: 'Some Value'});
```

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

### Installing Development Dependencies for canvas-datagrid

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/README.md

This command installs all necessary development dependencies for the canvas-datagrid project. It is a prerequisite for building or testing the application.

```Shell
npm install
```

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

### Sample Data for canvas-datagrid Formatting Example (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/03-format-data.mdx

This JSON snippet provides the sample data used in the `canvas-datagrid` example. It includes three columns: `col1` (string), `col2` (timestamp number), and `col3` (string), illustrating the structure of data expected by the grid, particularly for the date formatting example.

```JSON
[
  { "col1": "foo", "col2": 1501744914661, "col3": "a" },
  { "col1": "bar", "col2": 1301744914661, "col3": "b" },
  { "col1": "baz", "col2": 1401744914661, "col3": "c" }
]
```

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

### Running Docusaurus Development Server (npm run docusaurus)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/README.md

This command starts the Docusaurus development server, providing a live-reloading environment for authoring documents. It automatically recompiles and refreshes the documentation as changes are made, streamlining the writing process.

```Shell
npm run docusaurus
```

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

### Including canvas-datagrid via CDN script tag

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/README.md

This HTML snippet shows how to include the canvas-datagrid library directly from a CDN like unpkg.com. This method provides a quick way to get started without local installation, making `canvasDatagrid` globally available.

```html
<script src="https://unpkg.com/canvas-datagrid"></script>
```

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

### Installing canvas-datagrid with npm

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/README.md

This command installs the canvas-datagrid package using npm, making it available for use in Node.js projects or bundled web applications.

```console
npm install canvas-datagrid
```

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

### Integrating canvas-datagrid with Vue.js using prop binding

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/getting-started.md

Demonstrates how to use canvas-datagrid within a Vue.js application, binding data to the component's data property using Vue's :data.prop syntax. This enables reactive data updates and seamless integration with Vue's component model.

```vue
<canvas-datagrid :data.prop="[{"col1": "row 1 column 1"}]"></canvas-datagrid>
```

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

### Installing canvas-datagrid NPM Package

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/tutorials/vueExample.html

This command installs the canvas-datagrid library from npm, making it available for use within your Vue.js project. It is the initial step required before importing the component.

```Shell
npm install canvas-datagrid
```

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

### Example Data for canvas-datagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/02-set-data-after-instantiation.mdx

This JSON snippet provides an example of the data structure that can be assigned to a `canvas-datagrid` instance. It's an array of objects, where each object represents a row and its properties represent columns, demonstrating a common data format for grid display.

```json
[
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" }
]
```

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

### Defining Column Schema Example (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/tutorials/canvasDatagrid.md

Illustrates the basic JSON structure for defining column schemas, typically used to configure grid columns with properties like 'name'. This example shows a simple array of objects, each representing a column.

```JSON
[
        {
            "name": "col1"
        },
        {
            "name": "col2"
        },
        {
            "name": "col3"
        }
    ]
```

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

### Setting Data on canvas-datagrid Instance (TypeScript)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/02-set-data-after-instantiation.mdx

This snippet demonstrates how to initialize a `canvas-datagrid` instance and then assign data to it using the `grid.data` property. It shows the setup of the grid within a DOM element and the subsequent data assignment, which can be done at any time after instantiation.

```typescript
import canvasDatagrid from 'canvas-datagrid';
import data from '/data.json';

const app = document.getElementById('app');
const gridElement = document.createElement('div');
const grid = canvasDatagrid({
  parentNode: gridElement,
});

app.append(gridElement);

grid.data = data;
```

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

### Sample Data for canvas-datagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/27-order-by-a-column.mdx

This JSON array represents the sample dataset used by the `canvas-datagrid` example. Each object in the array corresponds to a row in the grid, containing `col1` (string), `col2` (number), and `col3` (string) properties.

```JSON
[
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" }
]
```

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

### Setting up Karma Context in JavaScript

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/test/index.html

This snippet initializes the Karma test runner's context within the browser window. It's a crucial step for Karma to manage and execute tests, ensuring the test environment is correctly configured before tests begin.

```JavaScript
window.__karma__.setupContext(window);
```

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

### Generating Sample Data for canvas-datagrid (TypeScript)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/37-open-a-tree.mdx

This utility function generates a large array of objects, simulating a dataset suitable for populating a `canvas-datagrid`. It creates 2000 rows, each with 20 columns, where cell values are the product of their row and column indices. This function is used by the main grid example to provide data.

```TypeScript
export default function () {
  var x,
    y,
    d = [];
  for (x = 0; x < 2000; x += 1) {
    d[x] = {};
    for (y = 0; y < 20; y += 1) {
      d[x][y] = y * x;
    }
  }
  return d;
}
```

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

### Implementing Custom CSV Parser (JavaScript)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/tutorials/canvasDatagrid.md

Provides an example of how to implement a custom parser function for CSV data, assigning it to `grid.parsers['text/csv']`. The parser takes raw data and a callback, returning parsed data in a grid-compatible format.

```JavaScript
grid.parsers['text/csv'] = function (data, callback) {
        var x, s = data.split('\n');
        for (x = 0; x < s.length; x += 1) {
            s[x] = s[x].split(',');
        }
        callback(s);
    }
```

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

### Sample Data for canvas-datagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/10-set-filter-function.mdx

This JSON snippet represents the `data.json` file used as input for the `canvas-datagrid` example. It provides an array of objects, each containing an 'id' (number) and an 'offendit' (string) field, serving as the dataset for the grid.

```JSON
[
  { "id": 0, "offendit": "foo" },
  { "id": 1, "offendit": "bar" },
  { "id": 2, "offendit": "baz" }
]
```

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

### Initializing and Styling canvas-datagrid in TypeScript

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/43-create-a-spreadsheet.mdx

This TypeScript snippet initializes a canvas-datagrid instance, attaching it to a dynamically created div element within the 'app' container. It configures the grid's data source using a createData function and applies styling attributes such as height, width, and column header click behavior. This setup provides a basic, interactive data grid.

```TypeScript
import canvasDatagrid from 'canvas-datagrid';
import createData from '/create-data';

const app = document.getElementById('app');
const gridElement = document.createElement('div');
const grid = canvasDatagrid({
  parentNode: gridElement,
  data: createData()
});

app.append(gridElement);

grid.attributes.columnHeaderClickBehavior = 'select';
grid.style.columnHeaderCellHorizontalAlignment = 'center';
grid.style.height = '300px';
grid.style.width = '100%';
```

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

### Sample Data for canvas-datagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/04-format-data-using-rendertext-event.mdx

This JSON snippet provides the sample data used by the `canvas-datagrid` example. It consists of an array of objects, each representing a row with three columns: `col1` (string), `col2` (numeric timestamp), and `col3` (string). This data is consumed by the `canvas-datagrid` instance to display and format.

```json
[
  { "col1": "foo", "col2": 1501744914661, "col3": "a" },
  { "col1": "bar", "col2": 1301744914661, "col3": "b" },
  { "col1": "baz", "col2": 1401744914661, "col3": "c" }
]
```

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

### Signaling Karma Test Runner as Loaded in JavaScript

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/test/index.html

This snippet informs the Karma test runner that all necessary scripts and resources have been loaded. It's typically called after all test files and dependencies are ready, allowing Karma to proceed with test execution.

```JavaScript
window.__karma__.loaded();
```

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

### Sample Data for canvas-datagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/30-allow-new-rows.mdx

This JSON snippet provides a minimal example of the data structure expected by canvas-datagrid. It defines an array containing a single object, representing one row with three columns: col1, col2, and col3. This data serves as the initial content for the grid.

```JSON
[{ "col1": "foo", "col2": 0, "col3": "a" }]
```

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

### Configuring Mocha for BDD Style in JavaScript

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/test/index.html

This line configures the Mocha test framework to use the Behavior-Driven Development (BDD) interface. BDD provides a syntax for writing tests that reads more like natural language, using 'describe', 'it', 'beforeEach', etc.

```JavaScript
mocha.setup('bdd');
```

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

### Fetching and Displaying Data with canvas-datagrid via XHR (TypeScript)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/09-get-data-via-xhr-function.mdx

This snippet initializes a `canvas-datagrid` instance and uses `XMLHttpRequest` to fetch JSON data from a public API. It displays loading status during the fetch and then populates the grid with the parsed data and schema upon successful load. It depends on `canvas-datagrid` and a local `parseOpenData` utility.

```typescript
import canvasDatagrid from 'canvas-datagrid';
import parseOpenData from '/open-data';

const xhr = new XMLHttpRequest();
const app = document.getElementById('app');
const grid = canvasDatagrid({
  parentNode: app,
});

grid.style.height = '300px';
grid.style.width = '100%';

xhr.addEventListener('progress', function (event) {
  grid.data = [
    {
      status:
        'Loading data: ' +
        event.loaded +
        ' of ' +
        (event.total || 'unknown') +
        ' bytes...',
    },
  ];
});

xhr.addEventListener('load', function (event) {
  grid.data = [{ status: 'Loading data ' + event.loaded + '...' }];
  const openData = parseOpenData(JSON.parse(this.responseText));

  grid.schema = openData.schema;
  grid.data = openData.data;
});

xhr.open(
  'GET',
  'https://data.cityofchicago.org/api/views/xzkq-xp2w/rows.json?accessType=DOWNLOAD',
);

xhr.send();
```

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

### Building Documentation with Docusaurus (npm run build)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/README.md

This command initiates the documentation build process. It first runs `jsdoc-to-md.js` to generate Markdown files from JSDoc annotations, then Docusaurus compiles all documentation into a React application for deployment.

```Shell
npm run build
```

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

### Basic Web Component Instantiation (HTML)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/tutorials/canvasDatagrid.md

Shows the simplest way to instantiate the canvas-datagrid as a web component in HTML, creating an empty grid without initial data or attributes.

```HTML
&lt;canvas-datagrid&gt;&lt;/canvas-datagrid&gt;
```

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

### Instantiating Grid Using Global Method

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/topics/ways-to-create-a-grid.md

This JavaScript snippet illustrates how to initialize the `canvas-datagrid` using its global `canvasDatagrid()` method. This method is typically used when the grid is loaded as a universal module or through a script that exposes a global function, allowing for flexible configuration via arguments.

```JavaScript
var foo = canvasDatagrid(<args>);
```

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

### Building Documentation - npm - Shell

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/building-and-testing.md

Runs the script to generate project documentation. This typically processes JSDoc comments or other documentation source files into a readable format.

```Shell
npm run build:docs
```

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

### Initializing canvas-datagrid with pure JavaScript

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/README.md

This JavaScript code initializes a new canvas-datagrid instance, appends it to the document body, and populates it with sample data. It demonstrates the basic programmatic creation and data assignment.

```js
var grid = canvasDatagrid();
document.body.appendChild(grid);
grid.data = [
  { col1: 'row 1 column 1', col2: 'row 1 column 2', col3: 'row 1 column 3' },
  { col1: 'row 2 column 1', col2: 'row 2 column 2', col3: 'row 2 column 3' }
];
```

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

### Creating Grid via Global canvasDatagrid Function

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/tutorials/canvasDatagrid.md

This JavaScript snippet illustrates instantiating the `canvas-datagrid` using its global function, `canvasDatagrid()`. This method allows passing configuration arguments directly during creation.

```JavaScript
var foo = canvasDatagrid(<args>);
```

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

### Running Tests with npm

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/CONTRIBUTING.md

This command executes the project's test suite. It is a prerequisite for pull requests, ensuring that all new or changed functionality is covered by tests and that existing tests pass.

```Shell
npm test
```

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

### Defining Data as Array of Objects for canvas-datagrid (JS)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/topics/setting-and-getting-data.md

This snippet demonstrates the `application/x-canvas-datagrid` format where data is represented as an array of objects. Each object corresponds to a row, and its properties represent column names, allowing for clear, self-describing data structures. This is the format returned when getting data from the grid.

```js
[
  { col1: 'row 1 column 1', col2: 'row 1 column 2', col3: 'row 1 column 3' },
  { col1: 'row 2 column 1', col2: 'row 2 column 2', col3: 'row 2 column 3' }
];
```

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

### Building Production and Debug Versions - npm - Shell

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/building-and-testing.md

Executes the build script defined in `package.json` to create both production and debug versions of the project. This command compiles source code and prepares assets for deployment and development.

```Shell
npm run build
```

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

### Initializing canvas-datagrid with Data (TypeScript)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/01-create-new-grid.mdx

This snippet demonstrates how to initialize a `canvas-datagrid` instance. It imports the library and a data source, creates a new `div` element to serve as the grid's parent, and then instantiates the grid, attaching it to the specified parent node and loading the imported data. The grid element is finally appended to the main 'app' element.

```TypeScript
import canvasDatagrid from 'canvas-datagrid';
import data from '/data.json';

const app = document.getElementById('app');
const gridElement = document.createElement('div');
const grid = canvasDatagrid({
  parentNode: gridElement,
  data,
});

app.append(gridElement);
```

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

### Building Documentation for canvas-datagrid

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/README.md

Runs the script specifically designed to generate the project's documentation. This is used to update or create the project's official documentation.

```Shell
npm run build:docs
```

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

### Sample Data Structure for Canvas Datagrid

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/tutorials/webcomponentDemo.html

Provides an example of a JSON array representing tabular data, suitable for consumption by a canvas datagrid. Each object in the array corresponds to a row, with keys representing column names and values as cell content.

```JSON
[ {"col1": "row 1 column 1", "col2": "row 1 column 2", "col3": "row 1 column 3"}, {"col1": "row 2 column 1", "col2": "row 2 column 2", "col3": "row 2 column 3"} ]
```

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

### Initializing canvas-datagrid with Custom Styles (TypeScript)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/19-alter-startup-styles.mdx

This snippet initializes a `canvas-datagrid` instance, appending it to a `div` element. It demonstrates how to apply custom styles like `cellBackgroundColor` and `cellColor` directly during instantiation, and it imports data from a `data.json` file.

```TypeScript
import canvasDatagrid from 'canvas-datagrid';
import data from '/data.json';

const app = document.getElementById('app');
const gridElement = document.createElement('div');
const grid = canvasDatagrid({
  parentNode: gridElement,
  data,
  style: {
    cellBackgroundColor: 'navy',
    cellColor: 'wheat',
  },
});

app.append(gridElement);
```

```JSON
[
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" }
]
```

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

### Setting Grid Data via Web Component (HTML)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/tutorials/canvasDatagrid.md

Illustrates how to populate the canvas-datagrid with data by embedding JSON directly between the opening and closing web component tags. This provides a declarative way to load data.

```HTML
&lt;canvas-datagrid&gt;[
            {"col1": "row 1 column 1", "col2": "row 1 column 2", "col3": "row 1 column 3"},
            {"col1": "row 2 column 1", "col2": "row 2 column 2", "col3": "row 2 column 3"}
        ]&lt;/canvas-datagrid&gt;
```

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

### Defining Data as Array of Arrays for canvas-datagrid (JS)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/topics/setting-and-getting-data.md

This snippet illustrates an alternative `application/x-canvas-datagrid` format where data is provided as an array of arrays. Each inner array represents a row, and its elements correspond to column values, requiring strict adherence to a predefined schema or column order.

```js
[
  ['row 1 column 1', 'row 1 column 2', 'row 1 column 3'],
  ['row 2 column 1', 'row 2 column 2', 'row 2 column 3']
];
```

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

### Sample Data for canvas-datagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/11-simple-context-menu.mdx

This JSON snippet provides a simple array of objects, serving as sample data for the `canvas-datagrid`. Each object represents a row in the grid, containing three properties: `col1` (string), `col2` (number), and `col3` (string). This data is imported and used by the TypeScript code to populate the grid.

```JSON
[
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" }
]
```

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

### Invoking Canvas Datagrid Drawing - JavaScript

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/tutorials/canvasDatagrid.md

The `canvasDatagrid.draw` method is a low-level function used to explicitly trigger the rendering of pixels onto the canvas. It is typically invoked when manual redrawing of the grid or parts of it is required, for example, after data changes or layout adjustments.

```JavaScript
canvasDatagrid.draw
```

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

### Sample Data for canvas-datagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/12-hierarchal-context-menus.mdx

This JSON snippet provides sample data used to populate the `canvas-datagrid`. It defines an array of objects, each representing a row with three columns: `col1` (string), `col2` (number), and `col3` (string), serving as the initial dataset for the grid.

```json
[
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" }
]
```

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

### Running Project Tests - npm - Shell

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/building-and-testing.md

Executes the project's test suite. Note that headless tests may fail due to limitations in canvas pixel detection, suggesting the use of VM testing or a browser for accurate results.

```Shell
npm test
```

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

### Running Tests for canvas-datagrid

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/README.md

Initiates the test suite for the canvas-datagrid project. Note that headless tests may fail due to limitations in canvas pixel detection, suggesting VM or browser-based testing.

```Shell
npm test
```

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

### Programmatically Creating a Grid Web Component

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/topics/ways-to-create-a-grid.md

This JavaScript snippet shows how to dynamically create an instance of the `canvas-datagrid` web component using `document.createElement()`. This approach is ideal for scenarios where the grid needs to be generated or added to the DOM at runtime.

```JavaScript
var foo = document.createElement('canvas-datagrid')
```

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

### Setting Custom Number Filter in canvas-datagrid (TypeScript)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/10-set-filter-function.mdx

This TypeScript snippet initializes a `canvas-datagrid` instance, appending it to the DOM. It demonstrates how to override the default filter for 'number' data types by assigning a custom function to `grid.filters.number`. This custom function performs an exact match, and the example then applies this filter to the 'id' column with a value of 1.

```TypeScript
import canvasDatagrid from 'canvas-datagrid';
import data from '/data.json';

const app = document.getElementById('app');
const gridElement = document.createElement('div');
const grid = canvasDatagrid({
  parentNode: gridElement,
  data,
  schema: [
    { name: 'id', type: 'number' },
    { name: 'offendit', type: 'string' }
  ]
});

app.append(gridElement);

grid.filters.number = function (value, filterFor) {
  if (!filterFor) {
    return true;
  }

  return value === filterFor;
};
grid.setFilter('id', 1);
```

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

### Sample Data for canvas-datagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/31-create-a-web-component-grid.mdx

This JSON snippet provides sample data in an array of objects format, intended to be used as input for the `canvas-datagrid` component. Each object represents a row with three columns: 'col1' (string), 'col2' (number), and 'col3' (string), demonstrating a basic tabular data structure.

```json
[
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" }
]
```

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

### Initializing canvas-datagrid for Multi-line Editing (TypeScript)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/05-use-a-textarea-to-edit-cells-instead-of-an-input.mdx

This TypeScript snippet initializes a `canvas-datagrid` instance, appending it to the DOM. It's configured to enable multi-line cell editing by setting `multiLine: true` and adjusts `cellHeight` to accommodate the multi-line content. This setup requires the `canvas-datagrid` library and sample data from `data.json`.

```TypeScript
import canvasDatagrid from 'canvas-datagrid';
import data from '/data.json';

const app = document.getElementById('app');
const gridElement = document.createElement('div');
const grid = canvasDatagrid({
  parentNode: gridElement,
  data,
  multiLine: true,
});

app.append(gridElement);

grid.style.cellHeight = 80;
```

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

### Parsing Open Data for canvas-datagrid Schema and Data (TypeScript)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/09-get-data-via-xhr-function.mdx

This utility function processes raw JSON data from an open data API, transforming it into a format suitable for `canvas-datagrid`. It extracts column metadata for the schema and maps row data based on column names, returning an object containing both the processed data and schema.

```typescript
export default function (openData) {
  const schema = openData.meta.view.columns;
  const data = openData.data.map(function (row) {
    var r = {};

    schema.forEach(function (column, index) {
      r[column.name] = row[index];
    });

    return r;
  });

  return {
    data: data,
    schema: schema,
  };
}
```

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

### Building Production and Debug Versions of canvas-datagrid

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/README.md

Executes the build script to create both production and debug versions of the canvas-datagrid project. This command is part of the standard development workflow.

```Shell
npm run build
```

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

### Configuring Karma Headless Chrome No Sandbox - JavaScript

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/building-and-testing.md

Adds a custom launcher to `karma.conf.js` to run ChromeHeadless with the `--no-sandbox` flag. This workaround is often necessary for Karma tests in WSL or Linux containers to prevent sandboxing-related issues.

```JavaScript
customLaunchers: {
  ChromeHeadlessNoSandbox: {
      base: 'ChromeHeadless',
      flags: ['--no-sandbox']
  }
}
```

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

### Updating CHANGELOG.md for New Version - Markdown

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/MAINTAINERS.md

This snippet illustrates the required format for adding a new version entry to the `CHANGELOG.md` file. It specifies the version number, release date, and a summary of changes, including contributor and issue references.

```Markdown
## 1.0.0 - 2025-06-01

### Added

- Big feature meriting 1.0.0 release (contributing-user-foo, #999)
```

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

### Setting CHROME_BIN for WSL Testing - Shell

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/building-and-testing.md

Sets the `CHROME_BIN` environment variable in WSL to the absolute path of the Google Chrome executable on the Windows host. This is crucial for Karma to locate and launch Chrome for testing.

```Shell
export CHROME_BIN='path/to/chrome'
```

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

### Sample Data for CanvasDatagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/18-canvas-fill-styles.mdx

This JSON snippet provides sample data in an array of objects format, intended to be loaded into the `canvas-datagrid`. Each object represents a row with three columns: `col1`, `col2`, and `col3`, demonstrating a basic dataset structure for grid population.

```JSON
[
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" }
]
```

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

### Configuring Custom ChromeHeadless Launcher for WSL

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/README.md

This JavaScript configuration snippet defines a custom launcher for Karma, `ChromeHeadlessNoSandbox`, which extends `ChromeHeadless` and adds the `--no-sandbox` flag. This flag is necessary to run ChromeHeadless successfully in WSL and certain Linux container environments due to sandboxing restrictions.

```JavaScript
customLaunchers: {
  ChromeHeadlessNoSandbox: {
      base: 'ChromeHeadless',
      flags: ['--no-sandbox']
  }
}
```

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

### Sample Data for canvas-datagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/01-create-new-grid.mdx

This JSON snippet provides sample data structured as an array of objects, suitable for direct use with `canvas-datagrid`. Each object represents a row, and its properties (e.g., 'col1', 'col2') define the columns and their respective values. This format allows for clear, labeled data representation within the grid.

```JSON
[
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" }
]
```

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

### Sample Data for canvas-datagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/20-replace-all-styles-at-runtime.mdx

This JSON snippet provides sample data used to populate the canvas-datagrid. It's an array of objects, where each object represents a row and its properties (e.g., `col1`, `col2`, `col3`) represent column values. This data is typically loaded into the grid upon initialization.

```JSON
[
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" }
]
```

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

### Initializing and Configuring Canvas-datagrid in JavaScript

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/tutorials/developer.html

This snippet initializes a `canvas-datagrid` component, appends it to a parent DOM node, sets the `columnHeaderClickBehavior` attribute to 'select', assigns sample data, defines a schema to control column visibility, and specifies a custom column order. It also attaches an event listener for `selectionchanged`.

```JavaScript
window.addEventListener('load', function () { var parentNode = document.getElementById('grid'); var grid = document.createElement('canvas-datagrid'); grid.setAttribute('columnHeaderClickBehavior', 'select'); parentNode.appendChild(grid); grid.data = [ {col0: '0foo', col1: 'foo', col2: 0, col3: 'a', col4: 'test', col5: 'test2'}, {col0: '1bar', col1: 'bar', col2: 1, col3: 'b', col4: 'test1', col5: 'test2'}, {col0: '2baz', col1: 'baz', col2: 2, col3: 'c', col4: 'test2', col5: 'test2'}, {col0: '3test', col1: 'test', col2: 3, col3: 'd', col4: 'test3', col5: 'test2'}, {col0: '4data', col1: 'data', col2: 4, col3: 'e', col4: 'test4', col5: 'test2'} ]; grid.schema = [ { "name": "col0", "hidden": null }, { "name": "col1", "hidden": true }, { "name": "col2", "hidden": null }, { "name": "col3", "hidden": true }, { "name": "col4", "hidden": true }, { "name": "col5", "hidden": null } ]; grid.columnOrder = [4, 5, 2, 1, 0, 3]; // if called, clicking on a x-axis header will select a full row. grid.addEventListener('selectionchanged', function () { console.log('change') }); });
```

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

### Setting Styles During canvas-datagrid Instantiation (JavaScript)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/tutorials/canvasDatagrid.style.md

This snippet demonstrates how to apply styles to a canvas-datagrid instance at the time of its creation. Styles are passed as an object within the `style` property of the configuration object, allowing initial visual customization.

```JavaScript
var grid = canvasDatagrid({
            style: {
                gridBackgroundColor: 'red'
            }
        });
```

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

### Creating a Web Component Grid with canvas-datagrid (TypeScript)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/31-create-a-web-component-grid.mdx

This snippet demonstrates how to programmatically create and append a `canvas-datagrid` web component to the DOM. It imports the `canvas-datagrid` library and a local `data.json` file, then selects an HTML element with ID 'app' to which the new grid element is appended.

```ts
import canvasDatagrid from 'canvas-datagrid';
import data from '/data.json';

const app = document.getElementById('app');
const grid = document.createElement('canvas-datagrid');

app.appendChild(grid);
```

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

### Building TypeScript Type Definitions - npm - Shell

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/building-and-testing.md

Converts JSDoc annotations into TypeScript type definition files (`.d.ts`), enabling better integration and type checking for TypeScript projects consuming this library.

```Shell
npm run build:types
```

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

### Setting Grid Attribute via Instance (JavaScript)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/tutorials/canvasDatagrid.md

Shows how to set a grid attribute through the `attributes` property of the grid instance in JavaScript. Attributes offer another way to configure grid behavior, often mirroring HTML attributes.

```JavaScript
myGrid.attributes.someAttribute = 'Some Value';
```

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

### Sample Data for canvas-datagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/33-add-a-column.mdx

This JSON snippet provides the initial dataset used to populate the `canvas-datagrid`. It consists of an array of objects, where each object represents a row with predefined values for 'col1', 'col2', and 'col3'. This data is loaded into the grid before any new columns are added.

```JSON
[
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" }
]
```

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

### Sample Data for canvas-datagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/41-toggle-debug-data.mdx

This JSON snippet provides a simple array of objects, serving as sample data for the `canvas-datagrid`. Each object represents a row with three columns: `col1` (string), `col2` (number), and `col3` (string). This data is loaded into the grid for display and interaction.

```JSON
[
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" }
]
```

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

### Sample Data for canvas-datagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/16-create-complex-context-menu.mdx

This JSON snippet provides sample data used to populate the `canvas-datagrid` instance. It is an array of objects, where each object represents a row with three properties: `col1` (string), `col2` (number), and `col3` (string), demonstrating a typical tabular data structure for grid display.

```json
[
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" },
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" },
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" },
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" }
]
```

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

### Formatting JavaScript Code with Prettier

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/CONTRIBUTING.md

This command automatically formats the JavaScript source code using Prettier, ensuring consistent code style across the project. Contributors should run this before submitting a pull request.

```Shell
npm run format
```

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

### Sample Data for canvas-datagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/13-context-menu-using-a-function-for-items.mdx

This JSON snippet provides a basic array of objects, serving as sample data for the canvas-datagrid. Each object represents a row with three columns: col1, col2, and col3. This data is imported by the TypeScript code and displayed within the grid.

```JSON
[
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" }
]
```

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

### Generating Sample Data for CanvasDatagrid - TypeScript

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/39-allow-users-to-open-trees.mdx

This utility function, `createData`, generates a two-dimensional array of numerical data. It creates 2000 rows, each containing 20 columns, where each cell's value is the product of its row and column index. This function is designed to provide sample data for populating a `canvas-datagrid` instance, particularly useful for demonstrating dynamic data loading in tree views.

```ts
export default function () {
  var x,
    y,
    d = [];
  for (x = 0; x < 2000; x += 1) {
    d[x] = {};
    for (y = 0; y < 20; y += 1) {
      d[x][y] = y * x;
    }
  }
  return d;
}
```

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

### Sample Data for canvas-datagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/28-select-an-area.mdx

This JSON snippet provides sample data structured as an array of objects, where each object represents a row with `col1`, `col2`, `col3`, and `col4` properties. This data is used to populate the `canvas-datagrid` instance.

```JSON
[
  { "col1": "foo", "col2": 0, "col3": "a", "col4": "z" },
  { "col1": "bar", "col2": 1, "col3": "b", "col4": "x" },
  { "col1": "baz", "col2": 2, "col3": "c", "col4": "w" },
  { "col1": "foo", "col2": 0, "col3": "a", "col4": "u" },
  { "col1": "bar", "col2": 1, "col3": "b", "col4": "l" },
  { "col1": "baz", "col2": 2, "col3": "c", "col4": "e" },
  { "col1": "foo", "col2": 0, "col3": "a", "col4": "c" },
  { "col1": "bar", "col2": 1, "col3": "b", "col4": "n" },
  { "col1": "baz", "col2": 2, "col3": "c", "col4": "b" }
]
```

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

### Setting Data: Array of Objects (application/x-canvas-datagrid)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/tutorials/canvasDatagrid.md

This JSON snippet exemplifies the default `application/x-canvas-datagrid` data format, where data is provided as an array of objects. Each object represents a row, and its properties correspond to column names.

```JSON
[
    {col1: 'row 1 column 1', col2: 'row 1 column 2', col3: 'row 1 column 3'},
    {col1: 'row 2 column 1', col2: 'row 2 column 2', col3: 'row 2 column 3'}
]
```

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

### Initializing canvas-datagrid with Unicode Data (TypeScript)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/42-display-unicode-samples.mdx

This TypeScript snippet initializes a `canvas-datagrid` instance, appending it to a DOM element. It imports data from `data.json` and sets a specific column width to accommodate wide Unicode samples, demonstrating how to display various Unicode characters within the grid.

```ts
import canvasDatagrid from 'canvas-datagrid';
import data from '/data.json';

const app = document.getElementById('app');
const gridElement = document.createElement('div');
const grid = canvasDatagrid({
  parentNode: gridElement,
  data,
});

app.append(gridElement);

grid.setColumnWidth(1, 5000);
```

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

### Sample Data for CanvasDatagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/35-draw-html-via-event.mdx

This JSON snippet provides the structured data used to populate the `canvas-datagrid` instance. It defines an array of objects, where each object represents a row with three columns: `col1`, `col2`, and `col3`, demonstrating a typical dataset structure for the grid.

```JSON
[
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" }
]
```

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

### Creating a Grid with HTML Web Component Tag

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/topics/ways-to-create-a-grid.md

This snippet demonstrates the declarative way to embed a `canvas-datagrid` directly into an HTML document using its custom element tag. This method is straightforward for static grid placements.

```HTML
<canvas-datagrid></canvas-datagrid>
```

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

### Creating Grid via JavaScript createElement

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/tutorials/canvasDatagrid.md

This JavaScript snippet demonstrates how to programmatically create a `canvas-datagrid` web component using `document.createElement`. The created element can then be appended to the DOM.

```JavaScript
var foo = document.createElement('canvas-datagrid')
```

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

### Sample Data for canvas-datagrid (JSON)

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/examples/07-detect-clicks.mdx

This JSON snippet provides sample data for the `canvas-datagrid`. It defines an array of objects, where each object represents a row with `col1`, `col2`, and `col3` properties. Note that `col1` contains multi-line string values, which `canvas-datagrid` can render.

```json
[
  { "col1": "foo\nbar", "col2": 0, "col3": "a" },
  { "col1": "bar\nfoo\nbar", "col2": 1, "col3": "b" },
  { "col1": "baz\nfoo\nbar", "col2": 2, "col3": "c" }
]
```

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

### Pushing Commits and Tags to Git - Bash

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/MAINTAINERS.md

This command pushes both the local commits and their associated Git tags to the remote repository. It is executed after the version update and commit, ensuring the new version tag is synchronized with the remote.

```Bash
git push && git push --tags
```

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

### Defining a Basic Schema in JavaScript

Source: https://github.com/tonygermaneri/canvas-datagrid/blob/master/docs/docs/topics/setting-a-schema.md

This snippet demonstrates a basic schema definition for `canvas-datagrid`. It shows an array of header objects, where each object represents a column and specifies its `name` property. This minimal schema explicitly defines the column names, allowing the grid to match data to these columns.

```JavaScript
[
  {
    name: 'col1',
  },
  {
    name: 'col2',
  },
  {
    name: 'col3',
  },
];
```