Flutter Fixed Column Horizontal Data table Widget

horizontal_data_table

a flutter widget that create a horizontal data table with fixed column on left hand side.

usage of horizontal data table

this shows widget’s full customizations:

horizontal data table(
      {@required this.lefthandsidecolumnwidth,
      @required this.righthandsidecolumnwidth,
      this.isfixedheader = false,
      this.headerwidgets,
      this.leftsideitembuilder,
      this.rightsideitembuilder,
      this.itemcount = 0,
      this.leftsidechildren,
      this.rightsidechildren,
      this.rowseparatorwidget = const divider(
        color: colors.transparent,
        height: 0.0,
        thickness: 0.0,
      ),
      this.elevation = 5.0}
     )
      

1. horizental data table has left side column(lefthandsidecolumnwidth) and right side maximum scrollable area width(righthandsidecolumnwidth) are required to input.
2. isfixedheader is to define whether use fixed top row header. if true, headerwidgets is required. default is false.
3. horizontal data table widget allow set children in two ways,
   a. directly add list of child widget (leftsidechildren and rightsidechildren)
   b. (recommended) using index builder to assign each row’s widget. itemcount is required to count the number of row.
4. horizontal data table has rowseparatorwidget is to add divider of each row. default is turned off.
5. elevation is the shadow between the header row and the left column when scroll start. default set to 5.0. if want to disable the shadow, please set to 0.0.

example about horizontal data table

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

void main() => runapp(myapp());

class myapp extends statelesswidget {
  // this widget is the root of your application.
  @override
  widget build(buildcontext context) {
    return materialapp(
      title: 'flutter demo',
      theme: themedata(
        primaryswatch: colors.blue,
      ),
      home: myhomepage(title: 'flutter demo home page'),
    );
  }
}

class myhomepage extends statefulwidget {
  myhomepage({key key, this.title}) : super(key: key);
  final string title;

  @override
  _myhomepagestate createstate() => _myhomepagestate();
}

class _myhomepagestate extends state<myhomepage> {
  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(
        title: text(widget.title),
      ),
      body: _getbodywidget(),
    );
  }

  widget _getbodywidget() {
    return container(
      child: horizontaldatatable(
        lefthandsidecolumnwidth: 100,
        righthandsidecolumnwidth: 600,
        isfixedheader: true,
        headerwidgets: _gettitlewidget(),
        leftsideitembuilder: _generatefirstcolumnrow,
        rightsideitembuilder: _generaterighthandsidecolumnrow,
        itemcount: 100,
        rowseparatorwidget: const divider(
          color: colors.black54,
          height: 1.0,
          thickness: 0.0,
        ),
      ),
      height: mediaquery.of(context).size.height,
    );
  }

  list<widget> _gettitlewidget() {
    return [
      _gettitleitemwidget('name', 100),
      _gettitleitemwidget('status', 100),
      _gettitleitemwidget('phone', 200),
      _gettitleitemwidget('register', 100),
      _gettitleitemwidget('termination', 200),
    ];
  }

  widget _gettitleitemwidget(string label, double width) {
    return container(
      child: text(label, style: textstyle(fontweight: fontweight.bold)),
      width: width,
      height: 56,
      padding: edgeinsets.fromltrb(5, 0, 0, 0),
      alignment: alignment.centerleft,
    );
  }

  widget _generatefirstcolumnrow(buildcontext context, int index) {
    return container(
      child: text('user_$index'),
      width: 100,
      height: 52,
      padding: edgeinsets.fromltrb(5, 0, 0, 0),
      alignment: alignment.centerleft,
    );
  }

  widget _generaterighthandsidecolumnrow(buildcontext context, int index) {
    return row(
      children: <widget>[
        container(
          child: row(
            children: <widget>[
              icon(icons.notifications_active,
                  color: index % 3 == 0 ? colors.red : colors.green),
              text(index % 3 == 0 ? 'disabled' : 'active')
            ],
          ),
          width: 100,
          height: 52,
          padding: edgeinsets.fromltrb(5, 0, 0, 0),
          alignment: alignment.centerleft,
        ),
        container(
          child: text('+001 9999 9999'),
          width: 200,
          height: 52,
          padding: edgeinsets.fromltrb(5, 0, 0, 0),
          alignment: alignment.centerleft,
        ),
        container(
          child: text('2019-01-01'),
          width: 100,
          height: 52,
          padding: edgeinsets.fromltrb(5, 0, 0, 0),
          alignment: alignment.centerleft,
        ),
        container(
          child: text('n/a'),
          width: 200,
          height: 52,
          padding: edgeinsets.fromltrb(5, 0, 0, 0),
          alignment: alignment.centerleft,
        ),
      ],
    );
  }
}