Expand Columns to cover the parent Container Width

[rohitranjan1991]

@bosskmk How do I expand the column without providing it a definite width to cover the whole width ?

[rohitranjan1991]

Hi @bosskmk , any updates?

[bosskmk]

There is no function to adjust the columns to fit their full width. A feature should be added. Or you can implement it yourself using stateManager .

[rohitranjan1991]

@bosskmk, I am very new to this library. Not exactly sure how to do it using stateManager. I will give it a try. However, if you can help me with any sample code to do this, that would be very helpful. Thanks

[amasahara]

I think that you can use MediaQuery.of(context).size.width/{number of table column} for auto matic resize column when load data.

[divan]

Is there any solution to this as of 2022?

[bosskmk]

Not yet available as a feature. More will be added in the future.

Before that, I attach a simple example.

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

import '../dummy_data/development.dart';

class EmptyScreen extends StatefulWidget {
  static const routeName = 'empty';

  const EmptyScreen({Key? key}) : super(key: key);

  @override
  _EmptyScreenState createState() => _EmptyScreenState();
}

class _EmptyScreenState extends State<EmptyScreen> {
  late List<PlutoColumn> columns;

  late List<PlutoRow> rows;

  late PlutoGridStateManager stateManager;

  @override
  void initState() {
    super.initState();

    columns = DummyData(10, 0).columns;

    rows = DummyData.rowsByColumns(length: 10, columns: columns);
  }

  void _fitColumnsWidth() {
    final maxWidth = stateManager.maxWidth!;

    // If there is a frozen column,
    // the width of the body area in the center excluding the width of the fixed columns
    // final bodyWidth =
    //     maxWidth - stateManager.bodyLeftOffset - stateManager.bodyRightOffset;

    final double eachWidth = maxWidth / stateManager.refColumns.length;

    for (final column in stateManager.refColumns) {
      column.width = eachWidth;
    }

    stateManager.notifyListeners();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(15),
        child: PlutoGrid(
          columns: columns,
          rows: rows,
          onChanged: (PlutoGridOnChangedEvent event) {
            print(event);
          },
          onLoaded: (PlutoGridOnLoadedEvent event) {
            stateManager = event.stateManager;
            _fitColumnsWidth();
          },
          configuration: const PlutoGridConfiguration(),
        ),
      ),
    );
  }
}

[bosskmk]

PlutoGrid 5.0.0 has been deployed. There are other changes from version 4, so please check the ChangeLog. https://pub.dev/packages/pluto_grid/changelog#500---2022-7-11

The demo page has also been updated. https://weblaze.dev/pluto_grid/build/web/#/

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.