Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Help] how to using WarpText #1127

Open
MrIyo opened this issue Dec 2, 2024 · 7 comments
Open

[Help] how to using WarpText #1127

MrIyo opened this issue Dec 2, 2024 · 7 comments
Labels
question Further information is requested stale This issue is stale because it has been open for 30 days with no activity.

Comments

@MrIyo
Copy link

MrIyo commented Dec 2, 2024

because there is no WarpText feature, can we trick it so that in the PlutoColumnGroup section where if I narrow the column later the text will still be visible but the writing will continue below? like Warptext in Excel.

any on know how to using feature like this ? if any one have trick like WarpText Sharing to me please

@MrIyo MrIyo added the question Further information is requested label Dec 2, 2024
@MrIyo
Copy link
Author

MrIyo commented Dec 2, 2024

the script like this, i want if Column change to short "User Information Employee"
after short the column will show "User Information ..."
i want the result is

User Information
Employeee

and this is my code

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PlutoGrid Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PlutoGridExamplePage(),
    );
  }
}

/// PlutoGrid Example
//
/// For more examples, go to the demo web link on the github below.
class PlutoGridExamplePage extends StatefulWidget {
  const PlutoGridExamplePage({Key? key}) : super(key: key);

  @override
  State<PlutoGridExamplePage> createState() => _PlutoGridExamplePageState();
}

class _PlutoGridExamplePageState extends State<PlutoGridExamplePage> {
  final List<PlutoColumn> columns = <PlutoColumn>[
    PlutoColumn(
      title: 'Id',
      field: 'id',
      type: PlutoColumnType.text(),
    ),
    PlutoColumn(
      title: 'Name',
      field: 'name',
      type: PlutoColumnType.text(),
      textAlign: PlutoColumnTextAlign.start,
    ),
    PlutoColumn(
      title: 'Age',
      field: 'age',
      type: PlutoColumnType.number(),
    ),
    PlutoColumn(
      title: 'Role',
      field: 'role',
      type: PlutoColumnType.select(<String>[
        'Programmer',
        'Designer',
        'Owner',
      ]),
    ),
    PlutoColumn(
      title: 'Joined',
      field: 'joined',
      type: PlutoColumnType.date(),
    ),
    PlutoColumn(
      title: 'Working time',
      field: 'working_time',
      type: PlutoColumnType.time(),
    ),
    PlutoColumn(
      title: 'salary',
      field: 'salary',
      type: PlutoColumnType.currency(),
      footerRenderer: (rendererContext) {
        return PlutoAggregateColumnFooter(
          rendererContext: rendererContext,
          formatAsCurrency: true,
          type: PlutoAggregateColumnType.sum,
          format: '#,###',
          alignment: Alignment.center,
          titleSpanBuilder: (text) {
            return [
              const TextSpan(
                text: 'Sum',
                style: TextStyle(color: Colors.red),
              ),
              const TextSpan(text: ' : '),
              TextSpan(text: text),
            ];
          },
        );
      },
    ),
  ];

  final List<PlutoRow> rows = [
    PlutoRow(
      cells: {
        'id': PlutoCell(value: 'user1'),
        'name': PlutoCell(value: 'Mike'),
        'age': PlutoCell(value: 20),
        'role': PlutoCell(value: 'Programmer'),
        'joined': PlutoCell(value: '2021-01-01'),
        'working_time': PlutoCell(value: '09:00'),
        'salary': PlutoCell(value: 300),
      },
    ),
    PlutoRow(
      cells: {
        'id': PlutoCell(value: 'user2'),
        'name': PlutoCell(value: 'Jack'),
        'age': PlutoCell(value: 25),
        'role': PlutoCell(value: 'Designer'),
        'joined': PlutoCell(value: '2021-02-01'),
        'working_time': PlutoCell(value: '10:00'),
        'salary': PlutoCell(value: 400),
      },
    ),
    PlutoRow(
      cells: {
        'id': PlutoCell(value: 'user3'),
        'name': PlutoCell(value: 'Suzi'),
        'age': PlutoCell(value: 40),
        'role': PlutoCell(value: 'Owner'),
        'joined': PlutoCell(value: '2021-03-01'),
        'working_time': PlutoCell(value: '11:00'),
        'salary': PlutoCell(value: 700),
      },
    ),
  ];

  /// columnGroups that can group columns can be omitted.
  final List<PlutoColumnGroup> columnGroups = [
    PlutoColumnGroup(title: 'Id', fields: ['id'], expandedColumn: true),
    // PlutoColumnGroup(title: 'User information', fields: ['name', 'age']),
    PlutoColumnGroup(
      title: 'User information Employee',
      fields: ['name', 'age'],
      titleTextAlign: PlutoColumnTextAlign.center,
      titleSpan: const TextSpan(
        text: 'User information Employee',
        style: TextStyle(
          overflow: TextOverflow.visible,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
    PlutoColumnGroup(title: 'Status', children: [
      PlutoColumnGroup(title: 'A', fields: ['role'], expandedColumn: true),
      PlutoColumnGroup(title: 'Etc.', fields: ['joined', 'working_time']),
    ]),
  ];

  /// [PlutoGridStateManager] has many methods and properties to dynamically manipulate the grid.
  /// You can manipulate the grid dynamically at runtime by passing this through the [onLoaded] callback.
  late final PlutoGridStateManager stateManager;

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

@nsnans
Copy link

nsnans commented Dec 5, 2024

The rendering code is here.

image

Change the rendering code overflow to visible.

image

end

So there should be no way to solve, the source code in these places are mostly directly fixed, should be made cellRender is more convenient to customize.

@stan-at-work
Copy link

@MrIyo I would looking at https://github.com/doonfrs/pluto_grid_plus for a maintained pluto_grid_version

@MrIyo
Copy link
Author

MrIyo commented Dec 9, 2024

The rendering code is here.

image

Change the rendering code overflow to visible.

image

end

So there should be no way to solve, the source code in these places are mostly directly fixed, should be made cellRender is more convenient to customize.

thanks for that information.

@MrIyo
Copy link
Author

MrIyo commented Dec 9, 2024

@MrIyo I would looking at https://github.com/doonfrs/pluto_grid_plus for a maintained pluto_grid_version

what we do ? change all to pluto_grid_plus or add the pluto_grid_plus ?

@stan-at-work
Copy link

@MrIyo I would looking at https://github.com/doonfrs/pluto_grid_plus for a maintained pluto_grid_version

what we do ? change all to pluto_grid_plus or add the pluto_grid_plus ?

Add the package and change the classnames to PlutoGridPlus

Copy link

github-actions bot commented Jan 8, 2025

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

@github-actions github-actions bot added the stale This issue is stale because it has been open for 30 days with no activity. label Jan 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested stale This issue is stale because it has been open for 30 days with no activity.
Projects
None yet
Development

No branches or pull requests

3 participants