[flutter] DataTable에서 데이터 정렬하는 방법

18 Dec 2023

flutter

Flutter의 DataTable 위젯은 표 형식으로 데이터를 표시하는 데 사용됩니다. 이 표는 행과 열을 가지며 데이터를 표시할 때 유용합니다. 그러나, DataTable에서 기본적으로 제공되지 않는 기능 중 하나는 데이터를 정렬하는 기능입니다. 이 기능을 구현하기 위해서는 몇 가지 추가적인 코드를 사용해야 합니다.

DataTable에서 데이터 정렬하기

DataTable에서 데이터를 정렬하기 위해서는 DataColumn 위젯의 onSort 콜백을 사용해야 합니다. 이 콜백을 사용하여 특정 열을 선택했을 때 데이터를 정렬하는 기능을 구현할 수 있습니다.

다음은 데이터를 정렬하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('DataTable 정렬 예제'),
        ),
        body: DataTable(
          columns: [
            DataColumn(label: Text('이름'), onSort: (columnIndex, ascending) {
              // 정렬 로직 추가
            }),
            DataColumn(label: Text('나이'), onSort: (columnIndex, ascending) {
              // 정렬 로직 추가
            }),
          ],
          rows: [
            DataRow(cells: [
              DataCell(Text('홍길동')),
              DataCell(Text('30')),
            ]),
            DataRow(cells: [
              DataCell(Text('김철수')),
              DataCell(Text('25')),
            ]),
          ],
        ),
      ),
    );
  }
}

정렬 로직 추가

onSort 콜백에서 실제로 데이터를 정렬하기 위해서는 비교 함수를 제공해야 합니다. 이 비교 함수는 선택한 열을 기준으로 데이터를 정렬합니다. 예를 들어, 숫자 또는 문자열을 비교하는 함수를 사용할 수 있습니다.

List<Map<String, dynamic>> _dataList = [
  {'name': '홍길동', 'age': 30},
  {'name': '김철수', 'age': 25},
];

void _sortData(String columnName, bool ascending) {
  _dataList.sort((a, b) {
    if (ascending) {
      return a[columnName].compareTo(b[columnName]);
    } else {
      return b[columnName].compareTo(a[columnName]);
    }
  });
}

위 예제에서는 _sortData 함수를 사용하여 데이터를 정렬합니다. 이 함수는 선택한 열의 이름과 정렬 방향을 매개변수로 받아서 해당 열의 데이터를 정렬합니다.

이제 DataTable에서 데이터를 정렬하는 방법을 알게 되었습니다. 추가로 고려해야 할 사항은 사용자 인터페이스에 정렬 방향을 나타내는 화살표 표시와 같은 기능을 추가하는 것입니다.

정렬 방향을 나타내는 화살표 표시하는 방법 등에 대해서는 추가로 탐구해 볼만한 주제입니다.

참고로, DataTable의 sortColumnIndex 및 sortAscending 속성을 사용하여 정렬 상태를 관리하는 방법도 있으며, 이 방법을 사용하여 더 효율적으로 데이터를 관리할 수 있습니다.

이제 DataTable에서 데이터를 정렬하는 방법을 활용하여 더욱 유용한 표를 구현해 보시기 바랍니다.