### NPM Installation

Source: https://github.com/tabulator-tables/tabulator/blob/master/README.md

Install Tabulator using the NPM package manager.

```bash
npm install tabulator-tables --save
```

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

### Turn the element into a tabulator with some simple javascript

Source: https://github.com/tabulator-tables/tabulator/blob/master/README.md

Initialize Tabulator on the created element with basic JavaScript.

```javascript
var table = new Tabulator("#example-table", {});
```

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

### Testing

Source: https://github.com/tabulator-tables/tabulator/blob/master/README.md

Commands to run Tabulator tests.

```bash
# Unit test
npm run test:unit

# E2E test
npm run build # Make sure to build the project first
npx playwright test # Run the tests
# or
npm run test:e2e

# Run all tests
npm run test
```

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

### Include the library and the css

Source: https://github.com/tabulator-tables/tabulator/blob/master/README.md

Include the Tabulator library and CSS files in your project.

```html
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
```

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

### CDN - UNPKG

Source: https://github.com/tabulator-tables/tabulator/blob/master/README.md

Include Tabulator from UNPKG CDN servers.

```html
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
```

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

### Tabulator Initialization

Source: https://github.com/tabulator-tables/tabulator/blob/master/test/e2e/index.html

Initializes a Tabulator table with test data and column definitions.

```javascript
// Initialize table with test data document.addEventListener("DOMContentLoaded", function () {
    const testData = [
        { id: 1, name: "Alice", age: 25, gender: "Female" },
        { id: 2, name: "Bob", age: 32, gender: "Male" },
        { id: 3, name: "Charlie", age: 45, gender: "Male" },
        { id: 4, name: "Diana", age: 27, gender: "Female" },
        { id: 5, name: "Ethan", age: 35, gender: "Male" },
    ];

    const columns = [
        { title: "ID", field: "id", sorter: "number" },
        { title: "Name", field: "name", sorter: "string" },
        { title: "Age", field: "age", sorter: "number" },
        { title: "Gender", field: "gender", sorter: "string" },
    ];

    // Create global reference for tests to access
    window.testTable = new Tabulator("#test-table", {
        data: testData,
        columns: columns,
        layout: "fitColumns",
    });
});
```

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

### Create an element to hold the table

Source: https://github.com/tabulator-tables/tabulator/blob/master/README.md

Create a div element that will be used to hold the Tabulator table.

```html
<div id="example-table"></div>
```

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

### Tabulator Initialization

Source: https://github.com/tabulator-tables/tabulator/blob/master/test/e2e/group-scroll.html

Initializes a Tabulator table with generated data, columns, and grouping options.

```javascript
document.addEventListener("DOMContentLoaded", () => {
  window.testTable = new Tabulator("#test-table", {
    data: generateData(),
    columns: [
      { title: "Name", field: "name" },
      { title: "Category", field: "category" },
      { title: "Value", field: "value", sorter: "number" },
    ],
    height: "300px",
    layout: "fitColumns",
    groupBy: "category",
    groupStartOpen: false,
  });
});
```

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

### Data Generation Function

Source: https://github.com/tabulator-tables/tabulator/blob/master/test/e2e/group-scroll.html

Generates sample data with groups and rows for testing.

```javascript
function generateData() {
  const groupCount = 1000;
  const rowsPerGroup = 3;
  const data = [];
  let id = 1;

  for (let g = 0; g < groupCount; g++) {
    for (let r = 0; r < rowsPerGroup; r++) {
      data.push({
        id: id++,
        category: "Group " + g,
        name: "Row " + g + "-" + r,
        value: Math.round(Math.random() * 1000),
      });
    }
  }

  return data;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.