[flutter] DataTable에서 헤더를 고정하는 방법

18 Dec 2023

flutter

DataTable 위젯은 데이터를 표 형식으로 보여주는데 유용하며, 스크롤 될 때 헤더를 고정하는 기능을 제공하지 않습니다. 하지만 이를 해결하기 위한 몇 가지 방법이 있습니다.

1. Custom DataTable 구현

우선, 스크롤했을 때 헤더를 고정시키기 위해 DataTable를 커스텀하여 구현할 수 있습니다. 이 방법은 직접 고정된 헤더를 구현하므로 상대적으로 복잡하고 레이아웃 관리가 필요합니다.

import 'package:flutter/material.dart';

class CustomDataTable extends StatelessWidget {
  final List<DataRow> rows;
  final List<DataColumn> columns;

  CustomDataTable({
    required this.rows,
    required this.columns,
  });

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: SingleChildScrollView(
        child: DataTable(
          columns: columns,
          rows: rows,
        ),
      ),
    );
  }
}

이 커스텀 위젯은 스크롤되는 테이블을 만들고, 각각의 셀을 포함하는 DataRow와 DataColumn을 가져와 출력합니다. 테이블을 수평 및 수직 스크롤할 수 있도록 이중 SingleChildScrollView를 사용했습니다.

2. third-party 패키지 사용

flutter_sticky_headers나 sticky_headers와 같은 써드파티 패키지를 사용하여 DataTable의 헤더를 고정시킬 수 있습니다. 이러한 패키지들은 스크롤 시 테이블의 헤더를 고정하는 기능을 제공하여 코드 양을 줄일 수 있습니다.

flutter_sticky_headers 패키지는 다음과 같이 사용할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:flutter_sticky_headers/flutter_sticky_headers.dart';

class StickyHeaderDataTableExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TableView(
      table: DataTable(
        columns: [
          DataColumn(label: Text('Column A')),
          DataColumn(label: Text('Column B')),
          DataColumn(label: Text('Column C')),
        ],
        rows: [
          DataRow(cells: [
            DataCell(Text('Row 1')),
            DataCell(Text('Row 1')),
            DataCell(Text('Row 1')),
          ]),
          // ... Add more rows as needed
        ],
      ),
    );
  }
}

class TableView extends StatelessWidget {
  final DataTable table;

  TableView({Key? key, required this.table}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final List<Widget> rowsAndHeaders = [];

    // The StickyHeader is used to wrap both the header and the table body
    rowsAndHeaders.add(StickyHeader(
      header: Container(
        height: 40.0, // TODO: Set your header height
        color: Colors.white, // TODO: Set your header color
        child: Text('Header'),
      ),
      content: table,
    ));

    return SingleChildScrollView(
      child: Column(
        children: rowsAndHeaders,
      ),
    );
  }
}

위 예제에서는 flutter_sticky_headers 패키지를 사용하여 DataTable의 헤더를 StickyHeader로 래핑하여 고정시켰습니다.

여기에서는 DataTable의 헤더를 고정하는 두 가지 방법을 알아보았습니다. 커스텀 구현을 통해 원하는 대로 조절하는 방법과, 써드파티 패키지를 사용하여 간편하게 헤더를 고정시키는 방법이 있으니 상황에 맞게 선택하여 사용하시면 됩니다.