### Basic HTML Pagination Setup

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/pagination.mdx

This is a simplified HTML example for enabling pagination. It's recommended to adapt this to your specific framework.

```html
<active-table pagination="true"></active-table>
```

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

### Full Active Table Example with Data and Styling

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/files.mdx

This example demonstrates a complete Active Table setup with data, styling, and export configurations. It's intended for Vanilla JS but can be adapted to other frameworks.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<!-- If you are using file formats other than csv (like in the example), import the 'xlsx' module (see Files Examples) -->

<active-table
  files='{
    "buttons": [
      {"export": {"fileName": "example_csv", "formats": ["csv"]}, "text": "Export CSV"},
      {"export": {"fileName": "example_xls", "formats": ["xls"]}, "text": "Export XLS"},
      {"export": {"fileName": "example_xlsx", "formats": ["xlsx"]}, "text": "Export XLSX"},
      {"export": {"fileName": "example_ods", "formats": ["ods"]}, "text": "Export ODS"},
      {"export": {"fileName": "example_txt", "formats": ["txt"]}, "text": "Export TXT"},
      {"export": {"fileName": "example", "formats": ["csv", "xls", "xlsx", "ods", "txt"]}}
  ]}'
  data='[
    ["Planet", "Diameter", "Mass", "Moons", "Density"],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638]]'
  tableStyle='{"width":"100%", "boxShadow": "rgb(172 172 172 / 17%) 0px 0.5px 1px 0px", "borderRadius":"2px"}'
></active-table>
```

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

### Full Active Table Example with File Options and Data

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/files.mdx

A comprehensive example demonstrating the Active Table component with configured file import/export buttons and sample data. This setup is suitable for direct use in HTML.

```html
<active-table
  files='{
    "buttons": [
      {
        "import": true,
        "styles": {
          "default": {
            "backgroundColor": "#46acff", "height": "19px", "padding": "7px 14px", "color": "white", "border": "unset"
          },
          "hover": {"backgroundColor": "#2b9cf8"}, "click": {"backgroundColor": "#198eef"}
        },
        "text": "Import File",
        "position": "top-left",
        "order": 1
      },
      {
        "export": true,
        "styles": {
          "default": {
            "backgroundColor": "#46acff", "height": "19px", "padding": "7px 14px", "color": "white", "border": "unset"
          },
          "hover": {"backgroundColor": "#2b9cf8"}, "click": {"backgroundColor": "#198eef"}
        },
        "text": "Export File",
        "position": "top-left",
        "order": 0
      }
  ]}'
  data='[
    ["Planet", "Diameter", "Mass", "Moons", "Density"],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638]]'
  tableStyle='{"width":"100%", "boxShadow": "rgb(172 172 172 / 17%) 0px 0.5px 1px 0px", "borderRadius":"2px"}'
></active-table>
```

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

### Full Active Table with Pagination and Data

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/pagination.mdx

This example demonstrates a complete Active Table setup with pagination enabled and sample data. It includes custom pagination styles and table styling.

```html
<active-table
  pagination='{
    "styles": {
      "pageButtons": {
        "buttons": {
          "default": {
            "color": "#3682ec", "stroke": "#3682ec", "border":"1px solid #dedede", "borderRight": "unset", "minWidth": "30px"
        }},
        "activeButton": {"default": {"backgroundColor": "#3682ec", "color": "white", "border":"1px solid #3682ec"}},
        "firstVisibleButtonOverride": {"borderTopLeftRadius": "5px", "borderBottomLeftRadius": "5px"},
        "lastVisibleButtonOverride": {"borderRight": "1px solid #dedede", "borderTopRightRadius": "5px", "borderBottomRightRadius": "5px"},
        "activeButtonPrecedence": true
    }},
    "rowsPerPage": 5
  }'
  data='[
    ["Planet", "Diameter", "Mass", "Moons", "Density"],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638],
    ["Mercury", 4879, 0.33, 0, 5429],
    ["Venus", 12104, 4.87, 0, 5243],
    ["Uranus", 51118, 86.8, 27, 1270],
    ["Pluto", 2376, 0.013, 5, 1850],
    ["Moon", 3475, 0.073, 0, 3340],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638],
    ["Mercury", 4879, 0.33, 0, 5429],
    ["Venus", 12104, 4.87, 0, 5243],
    ["Uranus", 51118, 86.8, 27, 1270],
    ["Pluto", 2376, 0.013, 5, 1850],
    ["Moon", 3475, 0.073, 0, 3340],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687]]'
  tableStyle='{"borderRadius":"2px"}'
></active-table>
```

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

### Install Dependencies and Build Wrapper

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/other-packages/react/README.md

Run these commands in your terminal to install Node.js dependencies and build the React wrapper.

```bash
# Install node dependencies:
$ npm install
```

```bash
# Build the wrapper:
$ npm run build
```

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

### Start Local Development Server

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/README.md

Use this command to automatically build and serve the project locally for development.

```bash
# automatically build and serve:
$ npm run start
```

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

### Full HTML Example with Data and Styling

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/pagination.mdx

This comprehensive HTML example shows the `<active-table>` element with pagination configured, including sample data and table styling. It's noted as a Vanilla JS example and suggests tailoring for specific frameworks.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<active-table
  pagination='{
    "positions": {
      "pageButtons": {"position": "bottom-center"},
      "numberOfVisibleRows": {"position": "top-left", "order": 2},
      "rowsPerPageSelect": {"position": "top-left", "order": 1}
    },
    "rowsPerPage": 5
  }'
  data='[
    ["Planet", "Diameter", "Mass", "Moons", "Density"],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638],
    ["Mercury", 4879, 0.33, 0, 5429],
    ["Venus", 12104, 4.87, 0, 5243],
    ["Uranus", 51118, 86.8, 27, 1270],
    ["Pluto", 2376, 0.013, 5, 1850],
    ["Moon", 3475, 0.073, 0, 3340],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638],
    ["Mercury", 4879, 0.33, 0, 5429],
    ["Venus", 12104, 4.87, 0, 5243],
    ["Uranus", 51118, 86.8, 27, 1270],
    ["Pluto", 2376, 0.013, 5, 1850],
    ["Moon", 3475, 0.073, 0, 3340],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687]]'
  tableStyle='{"borderRadius":"2px"}'
></active-table>
```

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

### Install Node Dependencies

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/README.md

Run this command to install the necessary Node.js dependencies for the project.

```bash
# Install node dependencies:
$ npm install
```

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

### Full HTML Filter Example with Data

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/filter.mdx

This example demonstrates enabling filtering with data directly in the HTML for a Vanilla JS setup. Tailor this to your specific framework.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<active-table
  filter="true"
  data='[
    ["Planet", "Diameter", "Mass", "Moons", "Density"],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638]]'
  tableStyle='{"borderRadius":"2px"}'
></active-table>
```

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

### Full ActiveTable Example with Custom Column Type

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/columnType.mdx

This example demonstrates a complete ActiveTable setup using a custom column type defined with an SVG icon. It includes data and basic table styling. Note that the `customColumnTypes` is provided as an HTML attribute.

```html
<active-table
  customColumnTypes='[
  {
    "name": "Custom type",
    "iconSettings": {
      "svgString": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg" xmlns:xlink=\"http://www.w3.org/1999/xlink" height=\"10\" width=\"16"> <polygon points=\"9,1 3,15 15,15\" class=\"triangle\" /></svg>",
      "containerStyles": {
        "dropdown": {"marginLeft": "-2.5px", "marginRight": "4px", "marginTop": "2px"},
        "headerCorrections": {"marginTop": "-1px", "marginLeft": "-2px"}
  }}}
]'
  defaultColumnTypeName="Custom type"
  data='[
    ["Gravity", "Diameter", "Mass", "Moons", "Density"],
    [9.8, 12756, 5.97, 1, 5514],
    [3.7, 6792, 0.642, 2, 3934],
    [23.1, 142984, 1898, 79, 1326],
    [9, 120536, 568, 82, 687],
    [11, 49528, 102, 14, 1638]]'
  tableStyle='{"borderRadius":"2px"}'
></active-table>
```

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

### Full Active Table with Custom Column Type

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/columnType.mdx

Demonstrates a complete Active Table setup including custom column type configuration and data. This example is for Vanilla JS but can be adapted to other frameworks.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<active-table
  customColumnTypes='[{
    "name": "Custom type",
    "select": {
      "options": ["Pass", "Fail"],
      "canAddMoreOptions": false
    },
    "iconSettings": {
      "reusableIconName": "select"
    }}]'
  availableDefaultColumnTypes="[]"
  data='[
    ["Category 1", "Category 2", "Category 3", "Category 4", "Category 5"],
    ["Pass", "Pass", "Fail", "Fail", "Fail"],
    ["Fail", "Pass", "Pass", "Fail", "Fail"],
    ["Fail", "Pass", "Pass", "Pass", "Fail"],
    ["Pass", "Fail", "Fail", "Pass", "Pass"],
    ["Pass", "Fail", "Fail", "Fail", "Fail"]]
  tableStyle='{"borderRadius":"2px"}'
></active-table>
```

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

### Install active-table via npm

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/installation.mdx

Use this command to install the core active-table component via npm.

```bash
npm install active-table
```

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

### Full ActiveTable Example with Data and Styling (HTML)

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/files.mdx

A comprehensive HTML example demonstrating the ActiveTable component with configured file import buttons, sample data, and custom table styling. Includes notes for Vanilla JS usage and external module imports.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<!-- If you are using file formats other than csv (like in the example), import the 'xlsx' module (see Files Examples) -->

<active-table
  files='{
    "buttons": [
      {
        "import": {
          "formats": ["csv", "ods", "txt"],
          "overwriteOptions": {"importRowStartIndex": 1, "tableRowStartIndex": 1}
        },
        "text": "Import CSV ODS TXT"
      },
      {
        "import": {
          "formats": ["xls", "xlsx"],
          "overwriteOptions": {"importRowStartIndex": 2, "tableRowStartIndex": 2}
        },
        "text": "Import XLS XLSX"
      }
  ]}'
  data='[
    ["Planet", "Diameter", "Mass", "Moons", "Density"],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638]]'
  tableStyle='{"width":"100%", "boxShadow": "rgb(172 172 172 / 17%) 0px 0.5px 1px 0px", "borderRadius":"2px"}'
></active-table>
```

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

### Configure Dropdown Display Settings with Data

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/sharedTypes.mdx

Full example showing how to configure dropdown display settings along with table data using HTML attributes. This example is for Vanilla JS and may need tailoring for specific frameworks.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<active-table
  rowDropdown='{"displaySettings": {
    "openMethod": {"overlayClick": true }}}
  '
  columnDropdown='{"displaySettings": {
    "openMethod": {"overlayClick": true }, "overlayStyles": {"default": {"backgroundColor": "grey"}, "hover": {"backgroundColor": "blue"}}}}
  '
  data='[
    ["Planet", "Diameter", "Mass", "Moons", "Density"],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638]]'
  tableStyle='{"borderRadius":"2px"}'
></active-table>
```

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

### Full Example: Active Table with Programmatic Updates

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/methods.mdx

This example demonstrates initializing an Active Table with data and then using JavaScript to continuously update random cells. It's intended for Vanilla JS and may need adaptation for other frameworks.

```html
<active-table
  id="active-table"
  data='[
    ["Name", "CPU", "Memory", "Disk", "Network"],
    ["Chrome", "4.5%", "1400MB", "0.2MB/s", "1.2Mbps"],
    ["Firefox", "2.5%", "800MB", "0.1MB/s", "0.5Mbps"],
    ["Edge", "5.5%", "1000MB", "1.4MB/s", "0.7Mbps"],
    ["Safari", "1.5%", "1200MB", "1.2MB/s", "0.2Mbps"],
    ["Opera", "3.5%", "400MB", "0.8MB/s", "0.5Mbps"]]
'
  tableStyle='{"borderRadius":"2px"}'
></active-table>

<script>
  function updateCell(tableElement) {
    if (!tableElement?.isConnected) return;
    setTimeout(() => {
      const rowIndex = Math.floor(Math.random() * 5 + 1);
      const columnIndex = Math.floor(Math.random() * 5 + 1);
      let newText = '';
      if (columnIndex === 1) {
        newText = `${Math.round(Math.random() * 20 * 10) / 10}%`;
      } else if (columnIndex === 2) {
        newText = `${Math.round(Math.random() * 1500 * 10) / 10}MB`;
      } else if (columnIndex === 3) {
        newText = `${Math.round(Math.random() * 1.5 * 10) / 10}MB/s`;
      } else {
        newText = `${Math.round(Math.random() * 1.5 * 10) / 10}Mbps`;
      }
      tableElement.updateCell({newText, rowIndex, columnIndex});
      updateCell(tableElement);
    }, 100);
  }
  const tableElementRef = document.getElementById('active-table');
  updateCell(tableElementRef);
</script>
```

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

### Install Active Table via CDN (Vanilla JS)

Source: https://context7.com/ovidijusparsiunas/active-table/llms.txt

Load the Active Table component directly from a CDN for use in Vanilla JS projects. This includes the component script and an example usage with data and table styling.

```html
<!-- Load from CDN -->
<script src="https://unpkg.com/active-table@1.1.8/dist/active-table.js"></script>

<active-table
  data='[
    ["Planet", "Diameter", "Mass", "Moons", "Density"],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934]
  ]'
  tableStyle='{"width":"100%","borderRadius":"4px"}'
></active-table>
```

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

### Full Circle Pagination Example

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/pagination.mdx

A complete example demonstrating circle pagination buttons with data and table styling. This snippet includes the HTML structure for the active-table component with pagination and data attributes.

```html
<active-table
  pagination='{
    "displayFirstLast": false,
    "styles": {
      "pageButtons": {
        "buttons": {
          "default": {"color": "grey", "stroke": "grey", "border":"1px solid #dedede", "marginRight": "5px", "marginTop": "1px", "height": "31px", "width": "31px", "borderRadius": "20px"}},
        "activeButton": {"default": {"backgroundColor": "#56b3ff", "color": "white", "border":"1px solid #56b3ff"}},
        "disabledButtons": {"default": {"backgroundColor": "white"}},
        "firstVisibleButtonOverride": {},
        "lastVisibleButtonOverride": {}
    }},
    "rowsPerPageSelect": false,
    "displayNumberOfVisibleRows": false,
    "positions": {"pageButtons": {"position": "bottom-center"}},
    "rowsPerPage": 2
  }'
  data='[
    ["Planet", "Diameter", "Mass", "Moons", "Density"],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638],
    ["Mercury", 4879, 0.33, 0, 5429],
    ["Venus", 12104, 4.87, 0, 5243],
    ["Uranus", 51118, 86.8, 27, 1270],
    ["Pluto", 2376, 0.013, 5, 1850],
    ["Moon", 3475, 0.073, 0, 3340]]'
  tableStyle='{"borderRadius":"2px"}'
></active-table>
```

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

### Install active-table-react via npm

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/installation.mdx

For React projects, install the active-table-react package instead.

```bash
npm install active-table-react
```

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

### Full ActiveTable Configuration with Data and Styling

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/files.mdx

Demonstrates a complete ActiveTable setup including drag and drop configuration, data binding, and table styling for a planetary dataset.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
<!-- If you are using file formats other than csv (like in the example), import the 'xlsx' module (see Files Examples) -->

<active-table
  files='{
    "dragAndDrop": {
      "overlayStyle": {"backgroundColor": "#80ff704d", "border": "5px dashed #52c360"},
      "formats": ["csv", "xlsx"],
      "overwriteOptions": {"importRowStartIndex": 1, "tableRowStartIndex": 1}
  }}'
  data='[
    ["Planet", "Diameter", "Mass", "Moons", "Density"],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638]]'
  tableStyle='{"width":"100%", "boxShadow": "rgb(172 172 172 / 17%) 0px 0.5px 1px 0px", "borderRadius":"2px"}'
></active-table>
```

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

### Install Active Table via npm

Source: https://context7.com/ovidijusparsiunas/active-table/llms.txt

Install Active Table and its React-specific package using npm. Import the component into your JavaScript or TypeScript files.

```bash
npm install active-table
# or for React
npm install active-table-react
```

```javascript
// Vanilla JS / Vue / Svelte / Angular
import 'active-table';

// React / Next.js
import { ActiveTable } from 'active-table-react';
```

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

### Full HTML Example of Active Table with Filter and Data

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/filter.mdx

This example shows a complete 'active-table' HTML element with filter styles, data, and table styling applied. It serves as a reference for vanilla JavaScript usage.

```html
<active-table
  filter='{
    "styles": {
      "input": {"height": "22px", "fontSize": "15px", "width": "150px", "borderColor": "#818181", "color": "black"},
      "placeholderColor": "grey",
      "caseIcon": {
        "default": {"color": "grey", "fontSize": "15px"},
        "hover": {"color": "black"},
        "click": {"color": "black"},
        "active": {"color": "blue"}
      },
      "dropdownIcon": {
        "default": {"color": "grey", "width": "18px", "height": "18px"},
        "hover": {"color": "black"},
        "click": {"color": "black"},
        "active": {"color": "blue"}
      }
    }
  }'
  data='[
    ["Planet", "Diameter", "Mass", "Moons", "Density"],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638]]'
  tableStyle='{"borderRadius":"2px"}'
></active-table>
```

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

### Basic HTML Filter Setup

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/filter.mdx

A simple HTML tag to enable filtering in an ActiveTable component. This is a basic setup for demonstration.

```html
<active-table filter="true"></active-table>
```

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

### Basic ActiveTable with File Import Configuration (HTML)

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/files.mdx

A simplified HTML example showing how to configure file import buttons for the ActiveTable component. This version omits the data and tableStyle for brevity.

```html
<active-table
  files='{
    "buttons": [
      {
        "import": {
          "formats": ["csv", "ods", "txt"],
          "overwriteOptions": {"importRowStartIndex": 1, "tableRowStartIndex": 1}
        }
      },
      {
        "import": {
          "formats": ["xls", "xlsx"],
          "overwriteOptions": {"importRowStartIndex": 2, "tableRowStartIndex": 2}
        }
      }
  ]}'
></active-table>
```

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

### Basic Pagination Configuration

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/pagination.mdx

Configure the number of rows per page and options for the rows per page selector. This example uses the React component API.

```jsx
import React from "react";
import { ActiveTable, TableContainer } from "@/components/ui/active-table";

function App() {
  return (
    <TableContainer minHeight="388">
      <ActiveTable
        pagination={{
          "rowsPerPageSelect": {"prefixText": "Number of rows:", "options": [10, 20, 30, "All"]},
          "rowsPerPage": 5
        }}
        data={[
          ["Planet", "Diameter", "Mass", "Moons", "Density"],
          ["Earth", 12756, 5.97, 1, 5514],
          ["Mars", 6792, 0.642, 2, 3934],
          ["Jupiter", 142984, 1898, 79, 1326],
          ["Saturn", 120536, 568, 82, 687],
          ["Neptune", 49528, 102, 14, 1638],
          ["Mercury", 4879, 0.33, 0, 5429],
          ["Venus", 12104, 4.87, 0, 5243],
          ["Uranus", 51118, 86.8, 27, 1270],
          ["Pluto", 2376, 0.013, 5, 1850],
          ["Moon", 3475, 0.073, 0, 3340],
          ["Earth", 12756, 5.97, 1, 5514],
          ["Mars", 6792, 0.642, 2, 3934],
          ["Jupiter", 142984, 1898, 79, 1326],
          ["Saturn", 120536, 568, 82, 687],
          ["Neptune", 49528, 102, 14, 1638],
          ["Mercury", 4879, 0.33, 0, 5429],
          ["Venus", 12104, 4.87, 0, 5243],
          ["Uranus", 51118, 86.8, 27, 1270],
          ["Pluto", 2376, 0.013, 5, 1850],
          ["Moon", 3475, 0.073, 0, 3340],
          ["Earth", 12756, 5.97, 1, 5514],
          ["Mars", 6792, 0.642, 2, 3934],
          ["Jupiter", 142984, 1898, 79, 1326],
          ["Saturn", 120536, 568, 82, 687]]}
        tableStyle={{"width":"100%", "boxShadow": "rgb(172 172 172 / 17%) 0px 0.5px 1px 0px", "borderRadius":"2px"}}
      ></ActiveTable>
    </TableContainer>
  );
}

export default App;
```

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

### Full HTML Pagination with Data

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/pagination.mdx

This example demonstrates enabling pagination with data directly in HTML attributes. Note the use of JSON string for the 'data' attribute.

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<active-table
  pagination="true"
  data='[
    ["Planet", "Diameter", "Mass", "Moons", "Density"],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638],
    ["Mercury", 4879, 0.33, 0, 5429],
    ["Venus", 12104, 4.87, 0, 5243],
    ["Uranus", 51118, 86.8, 27, 1270],
    ["Pluto", 2376, 0.013, 5, 1850],
    ["Moon", 3475, 0.073, 0, 3340],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638],
    ["Mercury", 4879, 0.33, 0, 5429],
    ["Venus", 12104, 4.87, 0, 5243],
    ["Uranus", 51118, 86.8, 27, 1270],
    ["Pluto", 2376, 0.013, 5, 1850],
    ["Moon", 3475, 0.073, 0, 3340],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687]]'
  tableStyle='{"borderRadius":"2px"}'
></active-table>
```

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

### Enable Pagination in Active Table

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/pagination.mdx

Use the `pagination` prop set to `true` to enable pagination. This example shows basic integration with sample data.

```jsx
import ActiveTable from '@site/src/components/table/activeTableBrowser';
import TableContainer from '@site/src/components/table/tableContainer';

<TableContainer minHeight="602">
  <ActiveTable
    pagination={true}
    data={[
      ["Planet", "Diameter", "Mass", "Moons", "Density"],
      ["Earth", 12756, 5.97, 1, 5514],
      ["Mars", 6792, 0.642, 2, 3934],
      ["Jupiter", 142984, 1898, 79, 1326],
      ["Saturn", 120536, 568, 82, 687],
      ["Neptune", 49528, 102, 14, 1638],
      ["Mercury", 4879, 0.33, 0, 5429],
      ["Venus", 12104, 4.87, 0, 5243],
      ["Uranus", 51118, 86.8, 27, 1270],
      ["Pluto", 2376, 0.013, 5, 1850],
      ["Moon", 3475, 0.073, 0, 3340],
      ["Earth", 12756, 5.97, 1, 5514],
      ["Mars", 6792, 0.642, 2, 3934],
      ["Jupiter", 142984, 1898, 79, 1326],
      ["Saturn", 120536, 568, 82, 687],
      ["Neptune", 49528, 102, 14, 1638],
      ["Mercury", 4879, 0.33, 0, 5429],
      ["Venus", 12104, 4.87, 0, 5243],
      ["Uranus", 51118, 86.8, 27, 1270],
      ["Pluto", 2376, 0.013, 5, 1850],
      ["Moon", 3475, 0.073, 0, 3340],
      ["Earth", 12756, 5.97, 1, 5514],
      ["Mars", 6792, 0.642, 2, 3934],
      ["Jupiter", 142984, 1898, 79, 1326],
      ["Saturn", 120536, 568, 82, 687]]}
    tableStyle={{"width":"100%", "boxShadow": "rgb(172 172 172 / 17%) 0px 0.5px 1px 0px", "borderRadius":"2px"}}
  ></ActiveTable>
</TableContainer>
```

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

### Configure File Import Options for Active Table

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/files.mdx

Use the 'files' prop to specify import options, such as 'importRowStartIndex' and 'tableRowStartIndex'. This example shows how to set these for an import button.

```html
<active-table
  files='{"buttons": [{"import": {"overwriteOptions": {"importRowStartIndex": 1, "tableRowStartIndex": -1}}}]}'
></active-table>
```

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

### Basic Pagination Styling

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/pagination.mdx

Configure the appearance of pagination buttons, including default, active, action, and disabled states. This example sets custom colors, borders, and margins for page buttons.

```html
<active-table
  pagination='{
    "styles": {
      "pageButtons": {
        "buttons": {
          "default": {"color": "grey", "stroke": "grey", "backgroundColor": "none", "border":"none", "marginRight": "5px", "marginTop": "3px", "height": "31px", "width": "31px", "borderRadius": "20px"}},
        "activeButton": {"default": {"backgroundColor": "#2e72fd", "border":"none", "color": "white"}},
        "actionButtons": {"default": {"border": "none"}},
        "disabledButtons": {"default": {"backgroundColor": "white"}},
        "firstVisibleButtonOverride": {},
        "lastVisibleButtonOverride": {}
    }},
    "rowsPerPageSelect": false,
    "displayNumberOfVisibleRows": false,
    "positions": {"pageButtons": {"position": "bottom-center"}},
    "rowsPerPage": 2
  }'
></active-table>
```

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

### HTML: Pagination with Data

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/pagination.mdx

This example demonstrates how to use the active-table web component with pagination and data defined directly in HTML. Ensure the 'data' attribute is a valid JSON string.

```html
<active-table
  pagination='{
    "styles": {
      "rowsPerPageSelect": {
        "container": {"marginRight": "1px"},
        "prefixText": {"color": "#1f6e97"},
        "button": {"default":{"border": "1px solid #9f9f9f"}, "hover":{"backgroundColor": "#fcfcfc"}},
        "buttonText": {"default":{"color": "#1f6e97"}, "hover":{"color": "#444444"}, "click":{"color": "#707070"}},
        "buttonArrow": {
          "default":{"filter": "brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(397%) hue-rotate(155deg) brightness(99%) contrast(92%)"},
          "hover":{"filter": "brightness(0) saturate(100%) invert(27%) sepia(0%) saturate(3140%) hue-rotate(277deg) brightness(97%) contrast(100%)"},
          "click":{"filter": "brightness(0) saturate(100%) invert(44%) sepia(0%) saturate(4%) hue-rotate(67deg) brightness(100%) contrast(98%)"}
      }}}
    "rowsPerPage": 5
  }'
  data='[
    ["Planet", "Diameter", "Mass", "Moons", "Density"],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638],
    ["Mercury", 4879, 0.33, 0, 5429],
    ["Venus", 12104, 4.87, 0, 5243],
    ["Uranus", 51118, 86.8, 27, 1270],
    ["Pluto", 2376, 0.013, 5, 1850],
    ["Moon", 3475, 0.073, 0, 3340],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638],
    ["Mercury", 4879, 0.33, 0, 5429],
    ["Venus", 12104, 4.87, 0, 5243],
    ["Uranus", 51118, 86.8, 27, 1270],
    ["Pluto", 2376, 0.013, 5, 1850],
    ["Moon", 3475, 0.073, 0, 3340],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687]]}
></active-table>
```

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

### Configure Column Dropdown Options

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/column.mdx

Set available actions for the column dropdown, such as sorting, deletion, and insertion. This example shows how to enable deletion and right insertion while disabling sorting and left insertion.

```html
<active-table
  columnDropdown='{
    "isSortAvailable": false,
    "isDeleteAvailable": true,
    "isInsertLeftAvailable": false,
    "isInsertRightAvailable": true
  }'
></active-table>
```

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

### Build and Serve for Production

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/README.md

Commands to build the project for production and then serve it.

```bash
# build and serve for production:
$ npm run build
$ npm run serve
```

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

### Build Component

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/component/README.md

Execute this command to build the component. This is typically done before serving or bundling.

```bash
# Build the component:
$ npm run build
```

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

### HTML Element Pagination Configuration

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/pagination.mdx

Configure pagination using HTML attributes for the custom element. This example shows basic setup for rows per page and options.

```html
<active-table
  pagination='{
    "rowsPerPageSelect": {"prefixText": "Number of rows:", "options": [10, 20, 30, "All"]},
    "rowsPerPage": 5
  }'
></active-table>
```

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

### Active Table with Data Starting at Header

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/header.mdx

Enables the 'dataStartsAtHeader' option to include the header row in index counting and pagination. This example shows the basic attribute usage.

```html
<active-table dataStartsAtHeader="true"></active-table>
```

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<active-table
  dataStartsAtHeader="true"
  data='[
    ["Planet", "Diameter", "Mass", "Moons", "Density"],
    ["Earth", 12756, 5.97, 1, 5514],
    ["Mars", 6792, 0.642, 2, 3934],
    ["Jupiter", 142984, 1898, 79, 1326],
    ["Saturn", 120536, 568, 82, 687],
    ["Neptune", 49528, 102, 14, 1638]]'
  tableStyle='{"borderRadius":"2px"}'
></active-table>
```

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

### Define Custom Column Type with SVG Icon (HTML Attribute)

Source: https://github.com/ovidijusparsiunas/active-table/blob/main/website/docs/docs/columnType.mdx

When setting `customColumnTypes` as an HTML attribute, use backslash \\ syntax to escape quotes within the JSON string. This example shows a basic setup for a custom column type with an SVG icon.

```html
<active-table
  customColumnTypes='[
  {
    "name": "Custom type",
    "iconSettings": {
      "svgString": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg" xmlns:xlink=\"http://www.w3.org/1999/xlink" height=\"10\" width=\"16"> <polygon points=\"9,1 3,15 15,15\" class=\"triangle\" /></svg>",
      "containerStyles": {
        "dropdown": {"marginLeft": "-2.5px", "marginRight": "4px", "marginTop": "2px"},
        "headerCorrections": {"marginTop": "-1px", "marginLeft": "-2px"}
  }}}
]'
></active-table>
```