### Setup and Install Dependencies

Source: https://github.com/nhn/tui.grid/blob/master/README.md

Clone the repository, install node modules, and run initial tests to ensure the environment is set up correctly.

```sh
git clone https://github.com/{your-personal-repo}/tui.grid.git
npm install
cd packages/toast-ui.grid
npm install
npm run test
```

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

### v3: Relation Column Setup

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide.md

Example of setting up relation columns in v3, including the 'relations.listItems' callback.

```javascript
// v3
grid.setColumns([
  {
    title: 'col1',
    name: 'col1',
    relations: [
      targetNames: ['col2'],
      listItems(value, rowData) {
        let items;

        if (value === '1') {
          items = [
           { text: 'opt1', value: '1' }
           { text: 'opt2', value: '2' }
          ];
        } else {
          items = [
            { text: 'opt3', value: '3' }
            { text: 'opt4', value: '4' }
          ];
        }

        return items;
     }
  ]
},
{
  title: 'col2',
  name: 'col2',
    editOptions: {
      type: 'select'
    }
  }
]);
```

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

### Start Development Server

Source: https://github.com/nhn/tui.grid/blob/master/CONTRIBUTING.md

Start the webpack-dev-server to run the project locally.

```bash
npm run serve
```

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

### v4: Relation Column Setup

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide.md

Example of setting up relation columns in v4, using the new 'editor' and 'relations.listItems' object parameter.

```javascript
// v4
grid.setColumns([
  {
    header: 'col1',
    name: 'col1',
    formatter: 'listItemText',
    editor: {
      type: 'select',
      options: {
        listItems: []
      }
    },
    relations: [
      targetNames: ['col2'],
      listItems({ value }) {
        let items;

        if (value === '1') {
          items = [
            { text: 'opt1', value: '1' }
            { text: 'opt2', value: '2' }
          ];
        } else {
          items = [
            { text: 'opt3', value: '3' }
            { text: 'opt4', value: '4' }
          ]
        }
        return items;
      }
    ]
  },
  {
    header: 'col2',
    name: 'col2',
    formatter: 'listItemText',
    editor: {
      type: 'select',
      options: {
        listItems: []
      }
    }
  }
]);
```

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

### Install TOAST UI Grid via npm

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/getting-started.md

Install the latest version of TOAST UI Grid using npm. Ensure Node.js is installed in your environment.

```sh
$ npm install --save tui-grid # Latest version
```

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

### Install TOAST UI Grid React

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.react-grid/README.md

Install the TOAST UI Grid React component using npm.

```sh
npm install --save @toast-ui/react-grid
```

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

### Vue Grid Basic Setup and Event Handling

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.vue-grid/docs/getting-started.md

Demonstrates the basic setup of the Vue Grid component, including data and column configuration, and how to bind event handlers for 'click' and 'check' events.

```html
<template>
  <grid
    :data="gridProps.data"
    :columns="gridProps.columns"
    @click="onClick"
    @check="onCheck"
  />
</template>
<script>
import 'tui-grid/dist/tui-grid.css'
import { Grid } from '@toast-ui/vue-grid';

export default {
  name: 'myGrid',
  components: {
    'grid': Grid
  },
  created() {
    this.gridProps = {
      data: [
        // ... omit
      ],
      columns: [
        // ... omit
      ]
    }
  },
  methods: {
    onClick(evt) {
      // implement your code
    },
    onCheck(evt) {
      // implement your code
    }
  }
};
</script>
```

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

### Install Toast-UI Grid with npm

Source: https://github.com/nhn/tui.grid/wiki/Getting-Started

Use this command to install the Toast-UI Grid package via npm, starting from version 2.3.0. This command downloads all necessary files and dependencies.

```bash
npm install tui-grid
```

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

### Install Dependencies

Source: https://github.com/nhn/tui.grid/blob/master/CONTRIBUTING.md

Install project dependencies using npm and bower.

```bash
npm install && bower install
```

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

### Install TOAST UI Grid via npm

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/README.md

Install the latest version or a specific version of TOAST UI Grid using npm.

```bash
$ npm install --save tui-grid # Latest version
$ npm install --save tui-grid@<version> # Specific version
```

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

### Install Toast-UI Grid with Bower

Source: https://github.com/nhn/tui.grid/wiki/Getting-Started

Use this command to install the Toast-UI Grid package via Bower. This command downloads all necessary files and dependencies.

```bash
bower install tui-grid
```

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

### Install TOAST UI Grid for Vue using npm

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.vue-grid/README.md

Install the TOAST UI Grid Vue component using npm.

```sh
npm install --save @toast-ui/vue-grid
```

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

### Example Code Snippet

Source: https://github.com/nhn/tui.grid/blob/master/docs/ISSUE_TEMPLATE.md

This section is for providing example code that demonstrates the current behavior of the issue being reported. It is a placeholder for actual code.

```javascript
// Write example code
```

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

### Create TOAST UI Grid Instance

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/README.md

Create a new TOAST UI Grid instance by providing the container element and column/data configurations. This example also shows how to call instance and static methods.

```javascript
const instance = new Grid({
  el: document.getElementById('grid'), // Container element
  columns: [
    {
      header: 'Name',
      name: 'name'
    },
    {
      header: 'Artist',
      name: 'artist'
    },
    {
      header: 'Release',
      name: 'release'
    },
    {
      header: 'Genre',
      name: 'genre'
    }
  ],
  data: [
    {
      name: 'Beautiful Lies',
      artist: 'Birdy',
      release: '2016.03.26',
      genre: 'Pop'
    }
  ]
});

instance.resetData(newData); // Call API of instance's public method

Grid.applyTheme('striped'); // Call API of static method
```

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

### Initialize Basic tui-grid

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/examples/example01-basic.html

Initializes a tui-grid instance with specified element, data, and column configurations. This is a foundational setup for displaying tabular data.

```javascript
const grid = new tui.Grid({
  el: document.getElementById('grid'),
  data: gridData,
  scrollX: false,
  scrollY: false,
  columns: [
    { header: 'Name', name: 'name' },
    { header: 'Artist', name: 'artist' },
    { header: 'Type', name: 'type' },
    { header: 'Release', name: 'release' },
    { header: 'Genre', name: 'genre' }
  ]
});
```

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

### Grid Component with RowData and ColumnData Props

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.vue-grid/docs/getting-started.md

Example of implementing the Grid component with `data` and `columns` props, defining the grid's structure and content.

```html
<template>
  <grid
    :data="gridProps.data" 
    :columns="gridProps.columns" 
  />
</template>
<script>
import 'tui-grid/dist/tui-grid.css'
import { Grid } from '@toast-ui/vue-grid';

export default {
  name: 'myGrid',
  components: {
    'grid': Grid
  },
  created() {
    this.gridProps = {
      data: [
        {
          name: 'Beautiful Lies',
          artist: 'Birdy'
        },
        {
          name: 'X',
          artist: 'Ed Sheeran'
        }
      ],
      columns: [
        {
          header: 'Name',
          name: 'name',
        },
        {
          header: 'Artist',
          name: 'artist'
        }
      ]
    }
  }
};
</script>
```

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

### Include Toast-UI Grid CSS File

Source: https://github.com/nhn/tui.grid/wiki/Getting-Started-(1.9.0)

Link this CSS file in your HTML to apply the styling for Toast-UI Grid. Adjust the path if your installation directory differs.

```html
<link rel="stylesheet" type="text/css" href="bower_components/tui-grid/dist/grid.css" />
```

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

### Basic Grid Setup with Vue

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.vue-grid/docs/getting-started.md

Integrate the Toast UI Vue Grid component into your Vue application. Ensure the CSS is imported and the component is registered.

```html
<template>
  <grid
    :data="gridProps.data"
    :columns="gridProps.columns"
    :theme="'striped'"
  />
</template>
<script>
import 'tui-grid/dist/tui-grid.css'
import { Grid } from '@toast-ui/vue-grid';

export default {
  name: 'myGrid',
  components: {
    'grid': Grid
  },
  created() {
    this.gridProps = {
      rows: [
        // ... omit
      ],
      columns: [
        // ... omit
      ]
    }
  }
};
</script>
```

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

### Get TOAST UI Grid Constructor (ES6 Module)

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/getting-started.md

Import the TOAST UI Grid constructor using ES6 module syntax.

```javascript
import Grid from 'tui-grid';
```

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

### Get TOAST UI Grid Constructor (CommonJS)

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/getting-started.md

Import the TOAST UI Grid constructor using `require` for CommonJS environments like Node.js.

```javascript
var Grid = require('tui-grid'); /* CommonJS */
```

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

### Basic Custom Text Editor Implementation

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/custom-editor.md

A fundamental example of a custom text editor using a JavaScript class. It demonstrates the required `constructor`, `getElement`, and `getValue` methods, along with an optional `mounted` method for initialization.

```javascript
class CustomTextEditor {
  constructor(props) {
    const el = document.createElement('input');

    el.type = 'text';
    el.value = String(props.value);

    this.el = el;
  }

  getElement() {
    return this.el;
  }

  getValue() {
    return this.el.value;
  }

  mounted() {
    this.el.select();
  }
}
```

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

### Include Toast-UI Grid Files via Bower

Source: https://github.com/nhn/tui.grid/wiki/Getting-Started

Include the necessary script and CSS files in your HTML when using Bower for installation. Ensure the paths correctly point to the bower_components directory.

```html
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/backbone/backbone.js"></script>
<script src="bower_components/tui-code-snippet/dist/tui-code-snippet.js"></script>
<script src="bower_components/tui-pagination/dist/tui-pagination.js"></script>
<script src="bower_components/tui-date-picker/dist/tui-date-picker.js"></script>
<script src="bower_components/tui-grid/dist/tui-grid.js"></script>
```

```html
<link rel="stylesheet" type="text/css" href="bower_components/tui-grid/dist/tui-grid.css" />
```

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

### Vue Component Setup with Grid

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.vue-grid/docs/getting-started.md

Register the Grid component and define its data and columns in the `created` lifecycle hook. Note that TOAST UI Grid has its own reactivity system.

```js
import 'tui-grid/dist/tui-grid.css'
import { Grid } from '@toast-ui/vue-grid'

export default {
  components: {
    'grid': Grid
  },
  created() {
    this.options = {
      data: [ // for rowData prop
        {
          name: 'Beautiful Lies',
          artist: 'Birdy'
        },
        {
          name: 'X',
          artist: 'Ed Sheeran'
        }
      ],
      columns: [ // for columnData prop
        {
          header: 'Name',
          name: 'name',
        },
        {
          header: 'Artist',
          name: 'artist'
        }
      ]
    }
  }
}
```

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

### Include Toast-UI Grid Files via npm

Source: https://github.com/nhn/tui.grid/wiki/Getting-Started

Include the main Toast-UI Grid JavaScript file in your HTML when using npm for installation. The path will reference the node_modules directory.

```html
<script src="node_modules/tui-grid/dist/tui-grid.js"></script>
```

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

### Basic Column Validation Setup

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/validation.md

Configure basic validation rules for a column, specifying data type and if the field is required. This sets up the initial validation constraints for the 'name' column.

```javascript
import Grid from 'tui-grid';

const grid = new Grid({
  // ...,
  columns: [
    {
      name: 'name',
      validation: {
        dataType: 'string',
        required: false
      }
    }
  ]
});
```

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

### Implement Custom Slider Renderer

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/custom-renderer.md

This example demonstrates a Custom Renderer for a slider input. It initializes an input element of type 'range' and sets its min/max values based on column options. The constructor stores the element and sets up an event listener to prevent event propagation.

```javascript
class CustomSliderRenderer {
  constructor(props) {
    const el = document.createElement('input');
    const { min, max } = props.columnInfo.renderer.options;

    el.type = 'range';
    el.min = String(min);
    el.max = String(max);

    el.addEventListener('mousedown', (ev) => {
      ev.stopPropagation();
    });

    this.el = el;
    this.render(props);
  }

  getElement() {
    return this.el;
  }

  render(props) {
    this.el.value = String(props.value);
  }
}
```

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

### Include Toast-UI Grid JavaScript Files

Source: https://github.com/nhn/tui.grid/wiki/Getting-Started-(1.9.0)

Add these script tags to your HTML to include the necessary JavaScript files for Toast-UI Grid and its dependencies. Ensure the paths are correct based on your installation directory.

```html
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/backbone/backbone.js"></script>
<script src="bower_components/tui-code-snippet/code-snippet.js"></script>
<script src="bower_components/tui-component-pagination/pagination.js"></script>
<script src="bower_components/tui-grid/dist/grid.js"></script>
```

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

### TOAST UI Grid Configuration with Custom Row Headers

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/examples/example11-row-headers.html

Configures a TOAST UI Grid instance with custom row headers, including row numbers and checkboxes, and defines column configurations. This setup is used to initialize the grid with specific row header functionalities.

```javascript
const grid = new tui.Grid({
  el: document.getElementById('grid'),
  data: gridData,
  rowHeaders: [
    { type: 'rowNum', renderer: { type: RowNumberRenderer } },
    {
      type: 'checkbox',
      header: ` <label for="all-checkbox" class="checkbox">
 <input type="checkbox" id="all-checkbox" class="hidden-input" name="_checked" />
 <span class="custom-input"></span>
 </label> `,
      renderer: { type: CheckboxRenderer }
    }
  ],
  columns: [
    { header: 'Name', name: 'name' },
    { header: 'Artist', name: 'artist' },
    { header: 'Type', name: 'type' },
    { header: 'Release', name: 'release' },
    { header: 'Genre', name: 'genre' }
  ]
});
```

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

### Initializing Grid with Footer Options

Source: https://github.com/nhn/tui.grid/wiki/Footer-and-Summary-(1.9.0)

Demonstrates how to enable and configure the footer, including its height and column-specific content templates, during grid initialization.

```APIDOC
## Initializing Grid with Footer Options

### Description
This code snippet shows how to initialize a Toast-UI Grid instance with the `footer` option enabled. It configures the footer's height and defines custom templates for specific columns.

### Method
`tui.Grid` constructor

### Parameters
- `el`: DOM element or selector for the grid container.
- `columnModelList`: Configuration for grid columns.
- `footer`: Object to configure the grid footer.
  - `height`: (Number) Height of the footer in pixels. Set to 0 to hide.
  - `columnContent`: (Object) Key-value pairs to configure content for each column's footer.
    - `[columnName]`: Object for a specific column.
      - `template`: (Function) A function that returns an HTML string for the column footer. Receives a `summary` object if `useAutoSummary` is true.

### Request Example
```javascript
var grid = new tui.Grid({
  el: $('#grid'),
  columnModelList: [/* ... */],
  footer: {
    height: 100,  // by pixel
    columnContent: {
      col1: {
        template: function() {
          return 'col1 footer';
        }
      },
      col2: {
        template: function() {
          return 'col2 footer';
        }
      }
    }
  }
});
```
```

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

### Implement Date Picker with Custom Editor in v4.0

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide.md

Starting from v4.0, the Date Picker functionality is implemented using the Custom Editor. This example shows the v4 implementation.

```javascript
const grid = new Grid({
  // ...
  columns: [
    {
      name: 'release',
      editor: {
        type: 'datePicker',
        options: {
          format: 'yyyy/MM/dd',
        }
      }
    }
  ]
});
```

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

### Mock API and Grid Initialization with DataSource

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/examples/example10-data-source.html

Sets up mock API endpoints for data retrieval and initializes the Toast UI Grid with remote data configuration. The grid fetches data from '/api/readData' and supports pagination with 5 items per page.

```javascript
// polyfill for below IE11
Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) {
  obj.__proto__ = proto;
  return obj;
};

XHRMock.setup();
XHRMock.get('/api/readData?perPage=5&page=1', {
  status: 200,
  body: JSON.stringify({
    result: true,
    data: {
      contents: gridData.slice(0, 5),
      pagination: { page: 1, totalCount: 20 }
    }
  })
})
.get('/api/readData?perPage=5&page=2', {
  status: 200,
  body: JSON.stringify({
    result: true,
    data: {
      contents: gridData.slice(5, 10),
      pagination: { page: 2, totalCount: 20 }
    }
  })
})
.get('/api/readData?perPage=5&page=3', {
  status: 200,
  body: JSON.stringify({
    result: true,
    data: {
      contents: gridData.slice(10, 15),
      pagination: { page: 3, totalCount: 20 }
    }
  })
})
.get('/api/readData?perPage=5&page=4', {
  status: 200,
  body: JSON.stringify({
    result: true,
    data: {
      contents: gridData.slice(15, 20),
      pagination: { page: 4, totalCount: 20 }
    }
  })
});

const grid = new tui.Grid({
  el: document.getElementById('grid'),
  data: {
    api: {
      readData: {
        url: '/api/readData',
        method: 'GET'
      }
    }
  },
  scrollX: false,
  scrollY: false,
  minBodyHeight: 30,
  rowHeaders: ['rowNum'],
  pageOptions: {
    perPage: 5
  },
  columns: [
    { header: 'Name', name: 'name' },
    { header: 'Artist', name: 'artist' },
    { header: 'Type', name: 'type' },
    { header: 'Release', name: 'release' },
    { header: 'Genre', name: 'genre' }
  ]
});
```

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

### Configure Init Params for GET Request

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/data-source.md

Use the `initParams` property within the `readData` option to add parameters to the query string for GET requests. This property is only valid for GET requests and is available from v4.9.0.

```javascript
const dataSource = {
  api: {
    readData: { url: '/api/read', method: 'GET', initParams: { param: 'param' } }
  }
};

const grid = new Grid({
  // ...,
  data: dataSource
});
```

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

### Initialize Net Add-on

Source: https://github.com/nhn/tui.grid/wiki/Binding-to-remote-data

Use the `use` method to initialize the 'Net' add-on with configuration options for fetching remote data. The `readData` property is required.

```javascript
grid.use('Net', {
    perPage: 100,
    api: {
        readData: 'api/readData'
    }
});
```

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

### Example of Updated Rows Data Format

Source: https://github.com/nhn/tui.grid/wiki/Binding-to-remote-data

When `request('updateData')` is called, the changed data is sent as a JSON string. This example shows the format for updated rows, including rowKey.

```json
updatedRows=[{"c1":"data1-1","c2":"data1-2,"rowKey":1},{"c1":"data2-1","c2":data2-2,"rowKey":2}]
```

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

### Run Storybook

Source: https://github.com/nhn/tui.grid/blob/master/README.md

Launch Storybook to develop and test UI components in isolation.

```sh
npm run storybook
```

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

### DataType Validation Example

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/validation.md

Demonstrates how to use the `dataType` option to enforce 'string' or 'number' types for cell data. The Grid visually indicates invalid data with a red background. This example shows setting 'name' to expect a string and 'downloadCount' to expect a number, then attempts to set invalid values.

```javascript
import Grid from 'tui-grid';

const grid = new Grid({
  // ...,
  columns: [
    {
      name: 'name',
      validation: {
        dataType: 'string'
      }
    },
    {
      name: 'downloadCount',
      validation: {
        dataType: 'number'
      }
    }
  ]
});

grid.setValue(0, 'name', 10);
grid.setValue(1, 'downloadCount', 'foo');
```

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

### Initialize TOAST UI Grid Instance

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/getting-started.md

Create a new TOAST UI Grid instance by passing an options object to the constructor. The 'el' and 'columns' options are required.

```javascript
import Grid from 'tui-grid';

const grid = new Grid({
  el: document.getElementById('wrapper'), // Container element
  columns: [
    // ...,
  ],
  // ...,
});
```

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

### Enabling and Configuring Footer

Source: https://github.com/nhn/tui.grid/wiki/Footer-and-Summary

Demonstrates how to enable the footer by adding the `footer` property to the Grid options and configuring its height and column content using templates.

```APIDOC
## Enabling and Configuring Footer

To enable the footer, add a `footer` property to the options object when creating a `tui.Grid` instance.

### Example
```javascript
var grid = new tui.Grid({
    el: $('#grid'),
    columns: [/* … */],
    footer: {
        height: 100,  // by pixel
        columnContent: {
            col1: {
                template: function() {
                    return 'col1 footer';
                }
            },
            col2: {
                template: function() {
                    return 'col2 footer';
                }
            }
        }
    }
});
```

- `footer.height`: Sets the height of the footer in pixels. A value of 0 hides the footer.
- `footer.columnContent`: A key-value object to configure the content of each column's footer. Keys are column names, and values are objects containing a `template` function that returns an HTML string for the footer cell (`<th>`).
```

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

### Replace setData with resetData

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide.md

Use `resetData` to configure data starting from v4.0.

```javascript
grid.resetData([ ... ]);
```

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

### Initialize Grid with Summary Options

Source: https://github.com/nhn/tui.grid/wiki/Using-Summary

Configure summary options when creating a tui.Grid instance. The `summary` object includes properties for `position`, `height`, and `columnContent`.

```javascript
var grid = new tui.Grid({
    el: $('#grid'),
    columns: [/* … */],
    summary: {
        position: 'bottom',
        height: 100,  // by pixel
        columnContent: {
            col1: {
                template: function() {
                    return 'col1 footer';
                }
            },
            col2: {
                template: function() {
                    return 'col2 footer';
                }
            }
        }
    }
});
```

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

### v3: Tree Expanded Event

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide.md

Example of handling the 'expanded' event for tree data in v3.

```javascript
// v3
grid.on('expanded', (rowKey, descendantRowKeys) => {
  console.log(rowKey, descendantRowKeys);
});
```

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

### Create Toast-UI Grid Instance (jQuery)

Source: https://github.com/nhn/tui.grid/wiki/Getting-Started

Instantiate the Grid using jQuery for element selection. The 'el' option is mandatory; others are optional.

```javascript
var grid = new tui.Grid({
    el: $('#wrapper'), // only required. other options are optional
    data: [ ... ],
    virtualScrolling: true,
    editingEvent: 'click',
    ...
});
```

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

### v4: Tree Expand Event

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide.md

Example of handling the 'expand' event for tree data in v4, with event object parameter.

```javascript
// v4
grid.on('expand', (ev) => {
  const rowKey = ev.rowKey;
  const descendantRowKeys = grid.getDescendantRows();

  console.log(rowKey, descendantRowKeys);
});
```

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

### v3: Row Header Checkbox Customization

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide.md

Example of customizing row headers with a checkbox in v3 using the 'template' option.

```javascript
// v3
const grid = new Grid({
  // ...
  rowHeaders: [
    {
      type: 'checkbox',
      template: (props) => {
        // ...
        return tmpl;
      }
    }
  ]
});
```

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

### TOAST UI Grid v3.x Bundle Files

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide.md

This shows the directory structure for bundle files in v3.x, which included all dependencies.

```text
- dist
    - tui.grid.comb.js
    - tui.grid.full.js
    - tui-grid.js
```

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

### v4: Row Header Checkbox Customization

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide.md

Example of customizing row headers with a checkbox in v4 using the 'header' and 'renderer' options.

```javascript
// v4
class SingleCheckRenderer {
  // ...
}

const grid = new Grid({
  // ...
  rowHeaders: [
    {
      type: 'checkbox',
      header: '
        <label for="all-checkbox" class="checkbox">
          <input type="checkbox" id="all-checkbox" class="hidden-input" name="_checked" />
          <span class="custom-input"></span>
        </label>
      ',
      renderer: SingleCheckRenderer
    }
  ]
});
```

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

### Initialize Grid with Dummy Rows

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/examples/example17-dummy-row.html

Configure the grid to show dummy rows to fill the remaining area. Set `showDummyRows` to `true` in the grid options.

```javascript
const grid = new tui.Grid({
  el: document.getElementById('grid'),
  data: gridData.slice(0, 6),
  width: 1200,
  bodyHeight: 600,
  scrollX: true,
  scrollY: false,
  columns: [
    { header: 'Name', name: 'name' },
    { header: 'Artist', name: 'artist' },
    { header: 'Type', name: 'type' },
    { header: 'Release', name: 'release' },
    { header: 'Genre', name: 'genre' }
  ],
  showDummyRows: true
});
```

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

### Initialize Grid with Summary Feature

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/summary.md

Add the `summary` property to the `tui.Grid` constructor options to enable the summary feature. Configure `position`, `height`, `columnContent`, and `defaultContent` as needed.

```javascript
import Grid from 'tui-grid';

const grid = new Grid({
  el: document.getElementById('grid'),
  columns: [/* … */],
  summary: {
    position: 'bottom',
    height: 100,  // by pixel
    columnContent: {
      col1: {
        template() {
          return 'col1 footer';
        }
      },
      col2: {
        template() {
          return 'col2 footer';
        }
      }
    },
    defaultContent: {
      template() {
        return 'default footer';
      }
    }
  }
});
```

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

### Initialize Grid with Client Pagination

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/examples/example23-client-pagination.html

Initializes the Toast UI Grid with client-side pagination enabled. The `pageOptions.useClient` property must be set to true. Configure the number of items per page using `perPage`.

```javascript
const grid = new tui.Grid({
  el: document.getElementById('grid'),
  data: gridData,
  columns: [
    { header: 'Name', name: 'name' },
    { header: 'Artist', name: 'artist' },
    { header: 'Type', name: 'type' },
    { header: 'Release', name: 'release' },
    { header: 'Genre', name: 'genre' }
  ],
  rowHeaders: ['rowNum'],
  pageOptions: {
    useClient: true,
    perPage: 5
  }
});
```

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

### Grid Initialization with Export Context Menu

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/examples/example27-export.html

Initializes a Toast UI Grid with data and columns, and configures a context menu that includes options for exporting data in CSV and Excel formats. The export actions can be customized with parameters like includeHeader, columnNames, and onlySelected.

```javascript
const grid = new tui.Grid({
  el: document.getElementById('grid'),
  data: gridData,
  scrollX: false,
  scrollY: false,
  columns: [
    { header: 'Name', name: 'name' },
    { header: 'Artist', name: 'artist' },
    { header: 'Type', name: 'type' },
    { header: 'Release', name: 'release' },
    { header: 'Genre', name: 'genre' },
  ],
  contextMenu: ({ rowKey, columnName }) => [
    [
      {
        name: 'export',
        label: 'Export',
        subMenu: [
          {
            name: 'default',
            label: 'Default',
            subMenu: [
              {
                name: 'csvExport',
                label: 'CSV export',
                action: () => {
                  grid.export('csv');
                },
              },
              {
                name: 'excelExport',
                label: 'Excel export(xlsx)',
                action: () => {
                  grid.export('xlsx');
                },
              },
              {
                name: 'excelExport',
                label: 'Excel export(xls)',
                action: () => {
                  grid.export('xls');
                },
              },
            ],
          },
          {
            name: 'includeHeader',
            label: 'includeHeader: false',
            subMenu: [
              {
                name: 'csvExport',
                label: 'CSV export',
                action: () => {
                  grid.export('csv', { includeHeader: false });
                },
              },
              {
                name: 'excelExport',
                label: 'Excel export(xlsx)',
                action: () => {
                  grid.export('xlsx', { includeHeader: false });
                },
              },
              {
                name: 'excelExport',
                label: 'Excel export(xls)',
                action: () => {
                  grid.export('xls', { includeHeader: false });
                },
              },
            ],
          },
          {
            name: 'columnNames',
            label: `['name', 'artist']`,
            subMenu: [
              {
                name: 'csvExport',
                label: 'CSV export',
                action: () => {
                  grid.export('csv', { columnNames: ['name', 'artist'] });
                },
              },
              {
                name: 'excelExport',
                label: 'Excel export(xlsx)',
                action: () => {
                  grid.export('xlsx', { columnNames: ['name', 'artist'] });
                },
              },
              {
                name: 'excelExport',
                label: 'Excel export(xls)',
                action: () => {
                  grid.export('xls', { columnNames: ['name', 'artist'] });
                },
              },
            ],
          },
          {
            name: 'onlySelected',
            label: 'onlySelected: true',
            subMenu: [
              {
                name: 'csvExport',
                label: 'CSV export',
                action: () => {
                  grid.export('csv', { onlySelected: true });
                },
              },
              {
                name: 'excelExport',
                label: 'Excel export(xlsx)',
                action: () => {
                  grid.export('xlsx', { onlySelected: true });
                },
              },
              {
                name: 'excelExport',
                label: 'Excel export(xls)',
                action: () => {
                  grid.export('xls', { onlySelected: true });
                },
              },
            ],
          },
        ],
      },
    ],
  ],
});
```

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

### Create Toast-UI Grid Instance (CommonJS)

Source: https://github.com/nhn/tui.grid/wiki/Getting-Started

Import and create a Grid instance using CommonJS module format, suitable for bundlers like Webpack.

```javascript
var Grid = require('tui-grid');
var grid = new Grid(...);
```

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

### Enable Row Numbers and Checkboxes

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/row-header.md

Configure `rowHeaders` with an array of strings or objects to display row numbers and checkboxes. This is the basic setup for enabling these features.

```javascript
import Grid from 'tui-grid';

const grid = new Grid({
  // ...,
  rowHeaders: ['rowNum', 'checkbox']
  // or rowHeaders: [{ type: 'rowNum' }, { type: 'checkbox' }]
});
```

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

### Using Pagination API Methods

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/pagination.md

Demonstrates how to retrieve the pagination instance and set the number of items per page using Grid API methods.

```javascript
const pagination = grid.getPagination();
const currentPage = pagination.getCurrentPage();
console.log(currentPage);

grid.setPerPage(10);
```

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

### Get Grid Root Element

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.vue-grid/README.md

Access the grid's root DOM element using the `getRootElement` method via a ref assigned to the grid component.

```js
this.$refs.tuiGrid.getRootElement();
```

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

### Get Filter State of a Column

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/filter.md

Retrieve the current filter state of a specific column. This returns an object detailing the filter's configuration and active conditions.

```javascript
grid.getFilterState(columnName);
// {
//   columnName: 'columnName',
//   conditionFn: Function,
//   type: 'type'
//   state: [
//     {
//       code: 'code',
//       value: 'value'
//     }
//   ]
// }
```

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

### Using TOAST UI Grid Static Methods

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.react-grid/README.md

To use static methods like `setLanguage` or `applyTheme`, import `tui-grid` directly instead of using the wrapper component.

```javascript
import TuiGrid from 'tui-grid';

TuiGrid.setLanguage('ko');
TuiGrid.applyTheme('striped');
```

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

### TUI Grid with Summary Configuration

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/examples/example09-summary.html

This snippet shows how to initialize a TUI Grid with the summary feature enabled. It includes data generation and column definitions, along with the 'summary' option to configure the position, height, and custom templates for displaying summary information like MAX, MIN, TOTAL, and AVG.

```javascript
const gridData = [];
(function() {
  for (let i = 0; i < 120; i += 1) {
    gridData.push({
      c1: 'User' + (i + 1),
      c2: ((i + 5) % 8) * 100 + i,
      c3: ((i + 3) % 7) * 60
    });
  }
})();

const grid = new tui.Grid({
  el: document.getElementById('grid'),
  data: gridData,
  scrollX: false,
  bodyHeight: 300,
  rowHeaders: ['rowNum'],
  columns: [
    {
      header: 'User ID',
      name: 'c1',
      align: 'center',
      editor: 'text'
    },
    {
      header: 'Score',
      name: 'c2',
      className: 'clickable',
      editor: 'text'
    },
    {
      header: 'Item Count',
      name: 'c3',
      editor: 'text'
    }
  ],
  summary: {
    height: 40,
    position: 'bottom', // or 'top'
    columnContent: {
      c2: {
        template: function(valueMap) {
          return `MAX: ${valueMap.max}<br>MIN: ${valueMap.min}`;
        }
      },
      c3: {
        template: function(valueMap) {
          return `TOTAL: ${valueMap.sum} <br>AVG: ${valueMap.avg.toFixed(2)}`;
        }
      }
    }
  }
});
```

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

### Get TOAST UI Grid Constructor (Browser Namespace)

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/getting-started.md

Access the TOAST UI Grid constructor function using the `tui.Grid` namespace in a browser environment.

```javascript
var Grid = tui.Grid;
```

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

### Removed Net API in v4.0

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide.md

The `Net` API, including `use` and `getAddOn`, has been removed due to new support for `DataSource`. This example shows the v3 usage.

```javascript
const grid = new Grid({
  // ...
  pagination: true
});

grid.use('Net', {
  // ...
});

const net = grid.getAddOn('Net'); // deprecated
net.request('createData');
```

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

### Using TOAST UI Grid with React Hooks

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.react-grid/README.md

React Hooks can be used with TOAST UI Grid. This example demonstrates using `useCallback` for event handlers.

```javascript
import React, { useCallback } from 'react';

const MyComponentWithHooks = () => {
  const onClick = useCallback(() => {
    console.log('condition:', condition);
  }, [condition]);

  return <Grid columns={columns} data={data} onClick={onClick} />;
};
```

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

### Import Grid Constructor (Browser)

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/README.md

In a browser environment, access the Grid constructor via the `tui` namespace.

```javascript
const Grid = tui.Grid;
```

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

### TOAST UI Grid v4.0 Bundle Files

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide.md

This shows the directory structure for bundle files in v4.0, which no longer includes bundled dependencies.

```text
- dist
    - tui-grid.js
```

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

### Getting the Grid Root Element

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.react-grid/README.md

Retrieve the root DOM element of the TOAST UI Grid instance using the `getRootElement()` method available through the component's ref.

```javascript
class MyComponent extends React.Component {
  gridRef = React.createRef();

  handleClickButton = () => {
    this.gridRef.current.getRootElement().classList.add('my-grid-root');
  };

  render() {
    return (
      <>
        <Grid ref={this.gridRef} data={data} columns={columns} />
        <button onClick={this.handleClickButton}>Click!</button>
      </>
    );
  }
}
```

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

### Load Grid using Single File Component (SFC)

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.vue-grid/README.md

Import the CSS and the Grid SFC when using Single File Components.

```js
import 'tui-grid/dist/tui-grid.css';
import Grid from '@toast-ui/vue-grid/src/Grid.vue';
```

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

### Handling Grid Events in React

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.react-grid/README.md

All TOAST UI Grid events are supported via `on[EventName]` props. For example, the `click` event can be handled using the `onClick` prop.

```javascript
class MyComponent extends React.Component {
  handleClick = () => {
    console.log('click!!');
  };

  render() {
    return <Grid data={data} columns={columns} onClick={this.handleClick} />;
  }
}
```

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

### Accessing Native Browser Event

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/custom-event.md

This example shows how to access the browser's native event object (e.g., click, mousedown) through the nativeEvent property of the GridEvent instance.

```javascript
grid.on('mousedown', function(ev) {
  console.log(ev.nativeEvent);
});
```

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

### Configure Row Span with _attributes.rowSpan

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/row-span.md

Use the `_attributes.rowSpan` option to define which columns should have their rows merged and for how many rows. This example merges the 'artist' column for 3 rows.

```javascript
import Grid from 'tui-grid';

const grid = new Grid({
  // ...,
  data: [
    {
      name: 'Beautiful Lies',
      artist: 'Birdy'
    },
    {
      name: '19',
      artist: 'Adele',
      _attributes: {
        rowSpan: { // Merge rows
          artist: 3
        }
      }
    },
    {
      name: '21',
      artist: 'Adele'
    },
    {
      name: '25',
      artist: 'Adele'
    }
  ],
  columns: [
      {
        header: 'Name',
        name: 'name'
      },
      {
        header: 'Artist',
        name: 'artist'
      }
    ]
});
```

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

### Customize Striped Theme with Custom Styles

Source: https://github.com/nhn/tui.grid/wiki/Applying-Themes-(1.9.0)

Extends the 'striped' theme by overriding specific styles. This example changes the background color of head cells and even rows.

```javascript
tui.Grid.applyTheme('striped', {
    cell: {
        head: {
            background: '#eef'
        },
        evenRow: {
            background: '#fee'
        }
    }
});
```

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

### Run Tests

Source: https://github.com/nhn/tui.grid/blob/master/CONTRIBUTING.md

Execute all project tests. Ensure tests pass before submitting changes.

```bash
npm run test
```

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

### Basic Grid Initialization

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/en/setting-width-height.md

Initializes a TOAST UI Grid with basic column definitions. The grid's width will be determined by its parent container.

```javascript
import Grid from 'tui-grid';

const grid = new Grid({
  // ...,
  columns: [
    {
      name: 'name'
    },
    {
      name: 'artist'
    },
    {
      name: 'type'
    }
  ]
});
```

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

### Load Grid using Namespace

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.vue-grid/README.md

Access the Grid component via the global namespace.

```js
var Grid = toastui.Grid;
```

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

### Updated data retrieval method signature in v4.0

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide.md

The `toJSON` parameter has been removed from data retrieval methods in v4.0. This example shows the updated v4 method signature for `getCheckedRowKeys`.

```javascript
/**
 * Returns a list of the checked rows.
 * @param {boolean} [useJson=false] - If set to true, return value will be converted to JSON string.
 */
public getCheckedRowKeys(): RowKey[] { ... }
```

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

### Define Custom Text Editor Class

Source: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/examples/example03-custom-editor.html

Create a custom editor class that extends the base editor functionality. This example defines a text editor with a maximum length option.

```javascript
class CustomTextEditor {
  constructor(props) {
    const el = document.createElement('input');
    const { maxLength } = props.columnInfo.editor.options;
    el.type = 'text';
    el.maxLength = maxLength;
    el.value = String(props.value);
    this.el = el;
  }

  getElement() {
    return this.el;
  }

  getValue() {
    return this.el.value;
  }

  mounted() {
    this.el.select();
  }
}
```