> 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/sorting.md).

# 정렬

하나 또는 여러 기준에 따라 행을 쉽게 정렬할 수 있습니다.

### 기본 정렬

정렬 기능은 데이터 그리드 사용자에게 기본적으로 활성화되어 있으며, 별도의 설정 없이 바로 사용할 수 있습니다.

{% embed url="<https://stackblitz.com/edit/vitejs-vite-rukkbll2?embed=1&file=src/App.tsx>" %}

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

```tsx
import { DataGrid, useGridApiRef } from '@noraent/nora-datagrid';

import { columns, dataSource } from './constants';

function App() {
  const gridRef = useGridApiRef();
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        checkboxSelection={false}
        gridRef={gridRef}
        columns={columns}
        dataSource={dataSource}
      />
    </div>
  );
}

export default App;
```

{% endtab %}

{% tab title="dataSource.ts" %}

```typescript
export const dataSource = [
  {
    name: "홍길동",
    phoneNumber: "010-****-6950",
    country: "KR",
  }
]
```

{% endtab %}

{% tab title="columns.ts" %}

```typescript
export const columns: DataGridColDef = [
  {
    fieldId: 'name',
    fieldName: '이름',
    width: 130,
  },
  {
    fieldId: 'phoneNumber',
    fieldName: '전화번호',
    renderHeader: (params: GridHeaderPrams) => {
      return params.fieldName;
    },
    width: 130,
  },
  {
    fieldId: 'country',
    fieldName: '국가',
    width: 130,
  },
];

```

{% endtab %}
{% endtabs %}

### 정렬 초기화

&#x20;`initialState`  속성을 사용하면 그리드가 처음 렌더링될 때 기본 정렬 상태를 설정할 수 있습니다. 예를 들어, 특정 컬럼을 오름차순으로 정렬한 상태로 시작하고 싶다면 다음과 같이 설정할 수 있습니다.

{% embed url="<https://stackblitz.com/edit/vitejs-vite-t7zk1ur7?file=src/App.tsx>" %}

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

```tsx
import { DataGrid, useGridApiRef } from '@noraent/nora-datagrid';

import { columns, dataSource } from './constants';

function App() {
  const gridRef = useGridApiRef();
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        checkboxSelection={false}
        gridRef={gridRef}
        columns={columns}
        dataSource={dataSource}
        readOnly
        initialState={{
          sorting: {
            sortModel: [
              {
                field: 'name',
                sort: 'asc',
              },
            ],
          },
        }}
      />
    </div>
  );
}

export default App;
```

{% endtab %}
{% endtabs %}

### 정렬 제어

`onSortModelChange`를 사용하면 사용자가 컬럼 정렬을 변경할 때마다 콜백을 받아 원하는 동작을 수행할 수 있습니다. 예를 들어, 정렬 변경 시 서버에 요청을 보내거나, 로컬 데이터 소스를 다시 정렬하는 등의 처리가 가능합니다.

{% hint style="info" %}
기본 설정은 클라이언트 정렬이지만, 서버 정렬이 필요한 경우 `sortingMode="server"` 옵션을 사용하면 클라이언트 정렬을 비활성화하고 서버 측 정렬을 적용할 수 있습니다.
{% endhint %}

{% embed url="<https://stackblitz.com/edit/vitejs-vite-ovoyh2px?file=src/App.tsx>" %}

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

```tsx
import { DataGrid, useGridApiRef } from '@noraent/nora-datagrid';

import { columns, dataSource } from './constants';

function App() {
  const gridRef = useGridApiRef();
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        checkboxSelection={false}
        gridRef={gridRef}
        columns={columns}
        dataSource={dataSource}
        readOnly
        /**
         * sortingMode가 server 인경우 정렬만 하지 않습니다.
         * 서버 정렬을 사용하는경우 server 설정해주세요.
         */
        sortingMode="server"
        onSortModelChange={(sortModel) => {
          /**
           * 정렬 기능을 활성화 되더있는경우 버튼을 누를 때마다 실행됩니다.
           */
          console.log('sortModel', sortModel);
        }}
      />
    </div>
  );
}

export default App;
```

{% endtab %}
{% endtabs %}

#### API

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