> For the complete documentation index, see [llms.txt](https://noraent.gitbook.io/nora/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://noraent.gitbook.io/nora/documentation/main-features/columns/row-event.md).

# Row Event

### onSelectionRowClick 

열(Row)을 선택했을 때 호출되는 콜백 함수입니다.

{% tabs %}
{% tab title="Typescript" %}

```tsx
import { DataGrid, DataGridRow } from '@noraent/nora-datagrid';
import { columns, dataSource } from './constants';

function App() {
  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGrid
        columns={columns}
        dataSource={dataSource}
        onSelectionRowClick={(row: DataGridRow) => {
          console.log("row: ", row);
        }}
        readOnly
      />
    </div>
  );
}
```

{% endtab %}
{% endtabs %}

### onSelectionRowClickBefore

열(Row)을 선택했을 때 onSelectionRowClick가 호출되기 직전에 실행되는 콜백 함수입니다.

{% tabs %}
{% tab title="Typescript" %}

```tsx
import { DataGrid, DataGridRow } from '@noraent/nora-datagrid';
import { columns, dataSource } from './constants';

function App() {
  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGrid
        columns={columns}
        dataSource={dataSource}
        onSelectionRowClickBefore={(row: DataGridRow, selected: boolean) => {
          return new Promise<boolean>((resolve, reject) => { 
              resolve(!selected); 
          });
        }}
        readOnly
      />
    </div>
  );
}
```

{% endtab %}
{% endtabs %}

***

### onSelectionRowChange

열(Row)이 변경되었을때  실행되는 콜백 함수 입니다.

{% tabs %}
{% tab title="Typescript" %}

```tsx
import { DataGrid, DataGridRow } from '@noraent/nora-datagrid';
import { columns, dataSource } from './constants';

function App() {
  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGrid
        columns={columns}
        dataSource={dataSource}
        handleSelectionRowChange={(rows: DataGridDataSourceModel) => {
          console.log("row: ", rows);
        }}
        readOnly
      />
    </div>
  );
}
```

{% endtab %}
{% endtabs %}

### onSelectionRowChangeBefore 🧪

onSelectionRowChange가 호출되기 직전에 실행되는 콜백 함수입니다. 행 선택이 실제로 변경되기 전에 검증이나 사전 처리가 필요한 경우에 사용됩니다.

{% tabs %}
{% tab title="Typescript" %}

```tsx
import { DataGrid, DataGridRow } from '@noraent/nora-datagrid';
import { columns, dataSource } from './constants';

function App() {
  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGrid
        columns={columns}
        dataSource={dataSource}
        onSelectionRowChangeBefore={(row: DataGridRow) => {
          return new Promise((resolve, reject) => { 
              resolve(newRows); 
          });
        }}
        readOnly
      />
    </div>
  );
}
```

{% endtab %}
{% endtabs %}

#### API

[DataGrid](/nora/api-reference/components/datagrid.md)