[flutter] DataTable에서 행 및 열의 순서 변경하는 방법

18 Dec 2023

flutter

Flutter 애플리케이션을 개발하다 보면 데이터 테이블을 사용하여 정보를 표시해야 하는 경우가 있습니다. 때로는 DataTable의 행이나 열의 순서를 변경해야 할 수도 있습니다. 이번 포스트에서는 Flutter의 DataTable에서 행과 열의 순서를 변경하는 방법에 대해 알아보겠습니다.

DataTable 생성

먼저 DataTable을 생성하는 방법을 알아보겠습니다.

DataTable(
  columns: const <DataColumn>[
    DataColumn(label: Text('이름')),
    DataColumn(label: Text('나이')),
    DataColumn(label: Text('이메일')),
  ],
  rows: const <DataRow>[
    DataRow(cells: <DataCell>[
      DataCell(Text('홍길동')),
      DataCell(Text('30')),
      DataCell(Text('hong@gmail.com')),
    ]),
    DataRow(cells: <DataCell>[
      DataCell(Text('김철수')),
      DataCell(Text('25')),
      DataCell(Text('kim@gmail.com')),
    ]),
  ],
)

위 코드는 간단한 DataTable을 생성하는 예제입니다. 만약 실제 데이터베이스에서 데이터를 가져와 테이블을 생성하는 경우에는 구체적인 데이터를 사용하여 DataTable을 생성할 것입니다.

행 및 열의 순서 변경

DataTable의 행과 열의 순서를 변경하려면 rows와 columns 속성에 있는 데이터를 변경해야 합니다. 예를 들어, 리스트를 이용하여 각 열과 행을 저장한 후에 순서를 변경할 수 있습니다.

List<DataColumn> columns = [
    DataColumn(label: Text('이름')),
    DataColumn(label: Text('나이')),
    DataColumn(label: Text('이메일')),
];

List<DataRow> rows = [
    DataRow(cells: <DataCell>[
      DataCell(Text('홍길동')),
      DataCell(Text('30')),
      DataCell(Text('hong@gmail.com')),
    ]),
    DataRow(cells: <DataCell>[
      DataCell(Text('김철수')),
      DataCell(Text('25')),
      DataCell(Text('kim@gmail.com')),
    ]),
];

// 열 순서 변경
columns.insert(0, columns.removeAt(2));

// 행 순서 변경
rows.insert(0, rows.removeAt(1));

위 코드에서 columns와 rows 리스트를 사용하여 컬럼과 로우의 순서를 변경하는 방법을 보여주고 있습니다.

요약

이번 포스트에서는 Flutter에서 DataTable에서 행과 열의 순서를 변경하는 방법에 대해 알아보았습니다. 위에서 살펴본 예제 코드를 참고하여 자신의 애플리케이션에 맞게 DataTable을 수정해 보세요.

더 자세한 내용은 다음 문서를 참고하세요. Flutter DataTable 클래스

다음 포스트에서는 DataTable에서 원하는 정보를 검색하거나 필터링하는 방법에 대해 다루겠습니다. 함께 기대해 주세요!