GithubHelp home page GithubHelp logo

caduandrade / davi_flutter Goto Github PK

View Code? Open in Web Editor NEW
51.0 7.0 18.0 1.65 MB

A full customized data view that builds the cells on demand. Focused on Web/Desktop Applications. Bidirectional scroll bars.

License: MIT License

Dart 83.93% Kotlin 0.04% Swift 0.41% Objective-C 0.01% HTML 1.41% CMake 6.30% C++ 7.40% C 0.51%
flutter table widget layout data dataview grid

davi_flutter's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

davi_flutter's Issues

Barra de rolagem horizontal

Amigo bom dia, você colocou na documentação que existe um erro no flutter quando a barra de rolagem fica visivel e invisivel, ai você coloquei como deveria resolver esse problema para sempre ficar visivel, eu como você colocou mais a barra horizontal não esta ficando visivel só a barra vertical. Coloquei como esta na forma abaixo:

EasyTableTheme(
    data: EasyTableThemeData(
      scrollbar: const TableScrollbarThemeData(
        horizontalOnlyWhenNeeded: false,
        verticalOnlyWhenNeeded: false,
      ),                
    ),
),

Suporte a Android e Ios

Olá, gostei do seu widget, mas vi que as rolagem scrool, não funciona no Android nem Ios, tem previsão de alguma atualização com isso?

Feature request: Cell merging

I've compared almost all the data table in pub, none of them have cell merging feature.
I wonder is this feature feasible?
image

Question on horizontal scroll

I have two tables in my app. One updates the horizontal scroll position of the table as the slider is being moved (ScheduleEasyTable) and the other only updates the horizontal position of the table after dragging the slider and releasing the mouse button.

This is only happening on the web platform. Have not tested whether html or canvaskit renderer is doing it. Windows platform does not exhibit this behavior.

I've also tried disabling pinned parameter as well as removing the InkWells to see if those might be causing an issue and neither fixes it for the ContactsEasyTable

Thoughts??

class ScheduleEasyTable extends StatefulWidget {
  const ScheduleEasyTable({Key? key}) : super(key: key);

  @override
  State<ScheduleEasyTable> createState() => _ScheduleEasyTableState();
}

class _ScheduleEasyTableState extends State<ScheduleEasyTable> {
  @override
  Widget build(BuildContext context) {
    final scheduleProvider = context.watch<Schedule>();
    final themeProvider = context.watch<AppTheme>();
    final _rows = scheduleProvider.filteredData;

    return Center(
      child: EasyTableTheme(
        data: EasyTableThemeData(
          headerCell: HeaderCellThemeData(
            padding: const EdgeInsets.all(5),
            sortIconColor: themeProvider.text,
          ),
          row: RowThemeData(
            hoveredColor: (index) => themeProvider.rowColorHover,
            color: (index) => index % 2 == 0
                ? themeProvider.rowColorHighlighted
                : themeProvider.rowColorNormal,
          ),
        ),
        child: EasyTable(
          EasyTableModel(
            rows: _rows,
            columns: [
              EasyTableColumn(
                name: "Controls",
                width: 140,
                // pinned: true,
                cellBuilder: (context, row) => EasyTableCell(
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      // MORE INFO ICON
                      IconButton(
                        tooltip: "More Info",
                        padding: const EdgeInsets.only(
                          left: 1,
                          right: 1,
                        ),
                        icon: const Icon(
                          Icons.info_outline,
                          size: 20,
                        ),
                        onPressed: () {
                          scheduleProvider.showMoreInfoDialog(context, row);
                        },
                      ),
                      // BUY BOOKS ICON
                      IconButton(
                        tooltip: "Buy Materials",
                        padding: const EdgeInsets.only(
                          left: 1,
                          right: 1,
                        ),
                        icon: const Icon(
                          Icons.menu_book_sharp,
                          size: 20,
                        ),
                        onPressed: () {
                          scheduleProvider.launchBookStore(row);
                        },
                      ),
                      IconButton(
                        tooltip: "Copy Course Information",
                        padding: const EdgeInsets.only(
                          left: 1,
                          right: 1,
                        ),
                        icon: const Icon(
                          Icons.copy_all_sharp,
                          size: 20,
                        ),
                        onPressed: () {
                          scheduleProvider.copyRowToClipboard(row);

                          showSnackBar(
                            'Course information copied to clipboard!',
                            isSuccess: true,
                          );
                        },
                      ),
                    ],
                  ),
                ),
              ),
              EasyTableColumn(
                name: "CRN",
                stringValue: (row) => (row as Map)["CRN"],
                width: 60,
                // pinned: true,
              ),
              EasyTableColumn(
                name: "Subject",
                stringValue: (row) => (row as Map)["SC"],
                width: 70,
              ),
              EasyTableColumn(
                name: "Course",
                stringValue: (row) => (row as Map)["CN"],
                width: 70,
              ),
              EasyTableColumn(
                name: "Description",
                stringValue: (row) => (row as Map)["CT"],
                width: 250,
              ),
              EasyTableColumn(
                name: "Hours",
                stringValue: (row) => (row as Map)["CH"],
                width: 60,
              ),
              EasyTableColumn(
                name: "Days",
                stringValue: (row) => (row as Map)["D"],
                width: 80,
              ),
              EasyTableColumn(
                name: "Start",
                stringValue: (row) => (row as Map)["TB"],
                width: 80,
              ),
              EasyTableColumn(
                name: "End",
                stringValue: (row) => (row as Map)["TE"],
                width: 80,
              ),
              EasyTableColumn(
                name: "Building",
                stringValue: (row) => (row as Map)["B"],
                width: 220,
              ),
              EasyTableColumn(
                name: "Room",
                stringValue: (row) => (row as Map)["R"],
                width: 80,
              ),
              EasyTableColumn(
                name: "Teacher(s)",
                stringValue: (row) => (row as Map)["TN"].toString(),
                width: 240,
              ),
              EasyTableColumn(
                name: "Enrolled",
                stringValue: (row) => "${(row as Map)["E"]} / ${row["MS"]}",
                width: 80,
              ),
              EasyTableColumn(
                name: "Date Start",
                stringValue: (row) => (row as Map)["PTRMDS"],
                width: 100,
              ),
              EasyTableColumn(
                name: "Date End",
                stringValue: (row) => (row as Map)["PTRMDE"],
                width: 100,
              ),
              EasyTableColumn(
                name: "Method",
                stringValue: (row) => (row as Map)["INSMC"],
                width: 80,
              ),
              EasyTableColumn(
                name: "Added Fees",
                stringValue: (row) => (row as Map)["AF"],
                width: 100,
              ),
            ],
          ),
          // columnsFit: viewPortWidth(context) >= 1900 ? true : false,
          visibleRowsCount: 20,
        ),
      ),
    );
  }
}
class ContactsEasyTable extends StatefulWidget {
  const ContactsEasyTable({Key? key}) : super(key: key);

  @override
  State<ContactsEasyTable> createState() => _ContactsEasyTableState();
}

class _ContactsEasyTableState extends State<ContactsEasyTable> {
  @override
  Widget build(BuildContext context) {
    final directoryProvider = context.watch<Directory>();
    final themeProvider = context.watch<AppTheme>();
    final _rows = directoryProvider.filteredData;

    return Center(
      child: EasyTableTheme(
        data: EasyTableThemeData(
          headerCell: HeaderCellThemeData(
            padding: const EdgeInsets.all(5),
            sortIconColor: themeProvider.text,
          ),
          row: RowThemeData(
            hoveredColor: (index) => themeProvider.rowColorHover,
            color: (index) => index % 2 == 0
                ? themeProvider.rowColorHighlighted
                : themeProvider.rowColorNormal,
          ),
        ),
        child: EasyTable(
          EasyTableModel(
            rows: _rows,
            columns: [
              EasyTableColumn(
                padding: const EdgeInsets.all(5),
                name: "Name",
                stringValue: (row) =>
                    "${(row as Map)["LastName"]}, ${row["FirstName"]}",
                width: 200,
                pinned: true,
              ),
              EasyTableColumn(
                padding: const EdgeInsets.all(5),
                name: "Phone Number",
                cellBuilder: (context, row) => EasyTableCell(
                  child: InkWell(
                    child: Padding(
                      padding: const EdgeInsets.all(5),
                      child: Text(
                        (row as Map)["PhoneNumber"],
                        style: const TextStyle(
                          decoration: TextDecoration.underline,
                        ),
                      ),
                    ),
                    onTap: () =>
                        launchUrl(Uri.parse("tel:${row["PhoneNumber"]}")),
                  ),
                ),
                sort: (a, b) {
                  return (a as Map)["PhoneNumber"]
                      .toString()
                      .compareTo((b as Map)["PhoneNumber"].toString());
                },
                width: 130,
              ),
              EasyTableColumn(
                padding: const EdgeInsets.all(5),
                name: "Title",
                stringValue: (row) => (row as Map)["JobTitle"],
                width: 200,
              ),
              EasyTableColumn(
                padding: const EdgeInsets.all(5),
                name: "Department",
                stringValue: (row) => (row as Map)["Department"],
                width: 260,
              ),
              EasyTableColumn(
                padding: const EdgeInsets.all(5),
                name: "Email",
                cellBuilder: (context, row) => EasyTableCell(
                  child: InkWell(
                    child: Padding(
                      padding: const EdgeInsets.all(5),
                      child: Text(
                        (row as Map)["EmailAddress"],
                        style: const TextStyle(
                          decoration: TextDecoration.underline,
                        ),
                      ),
                    ),
                    onTap: () =>
                        launchUrl(Uri.parse("mailto:${row["EmailAddress"]}")),
                  ),
                ),
                width: 230,
              ),
              EasyTableColumn(
                padding: const EdgeInsets.all(5),
                name: "Campus",
                stringValue: (row) => (row as Map)["Campus"],
                width: 130,
              ),
              EasyTableColumn(
                padding: const EdgeInsets.all(5),
                name: "Office",
                stringValue: (row) => (row as Map)["Office"],
                width: 100,
              ),
            ],
          ),
          columnsFit: viewPortWidth(context) >= 1300 ? true : false,
          // visibleRowsCount: 20,
        ),
      ),
    );
  }
}

Version 2.0.0

This refactoring would facilitate and allow better performance, right pinned columns, header group, and infinite scroll widget.

Nesting support

Hi! Thanks for your project. I have data that have 6 level of element nesting. Like:

Item:
 lots: 
   lot
     objs
         obj

I need to display them in table. I did not seen tables components that have support of deep nesting. It would be cool if you will do something for this.

Stretchable column

Hi,

Thanks for this project.
I can't find any way of stretching only a single column to fill the available width while having other columns have a fixed width with custom cell renderers.
I'm looking for the following behavior:

| <---- flex column that will fill in all available width ---> | fixed width column | fixed width column |

The idea is that the fixed width columns will not allow the width to go below their min width (or their intrinsic width) and the flex column use up the available width after the fixed width columns have taken theirs.

Things I've tried:

  • Setting a weight of 100 on the stretch column and a weight of 1 on the fixed columns, but then the fixed width columns aren't rendered at all.
  • Setting lower weights doesn't give the desired behavior either - For example, using weight 10 on the stretch column and 1 on the others gets them to render, but the columns that are supposed to be fixed width still expand and contract when the window is resized.
  • The width parameter of the columns seems to be ignored with columnsFit: true.
  • I also tried wrapping the columns in Widgets that apply constraints like ConstrainedBox or IntrinsicWidth, but there was no effect.

Specifically in my case I only need 1 flex column, but I suppose this can be generalized into the following:
How to mix any number of flex columns (that behave according to the weight behavior) with fixed-width columns that do not flex?

Feature: onSecondaryTap

Hi,

I like your package, its pretty easy to use :)

I didn't test the lazy building but I assume its working, just not sure what will happen if the next content has larger text in the column, will the row resize on the fly?

Could you add a onSecondaryTap? This would be nice.

Accessibility / Semantics

First. Thank you for this wonderful library!

The issue I'm having is in regards to accessibility. The semantics of some fields are all squished together.

After adding RendererBinding.instance.setSemanticsEnabled(true) and running with flutter run -d chrome --profile --dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true, this is what I get:

image

Provide getter for _rows

  List<ROW> _rows;
 
  /// allow user to extract the updated data(add/remove)
  List<ROW> get rowsData => _rows;

Smaller feature requests

Hi,

I had some ideas and a smaller issue.
Currently its not possible to let the table fill up the full height right?

  • IsExpanded (fill available full height and width)
  • Styling for header area
  • Footer with paging
  • Actionbar (would be nice to have only. Maybe a default widget where you can add actions like on appbar)

If it would be possible the actionbar on top and footer with paging would be even cooler.

Header and cell customizations

  • EasyTableColumn
    • textStyle to headerTextStyle and cellTextStyle
    • padding to headerPadding and cellPadding
    • alignment to headerAlignment and cellAlignment
    • cellStyleBuilder

hand scrolling notworking

Touch pointer move a lot. The moving distance of X is:1.0, limit is:60The moving distance of Y is:65.0, limit is:60
just have to move with specific point

[Flutter 3.3.0+] Scrolling does not work with a trackpad on macOS

Hi,

after the update to Flutter 3.3.0 the table keeps freezing when multiple entries are in and Im scrolling.
I think they changed internally how scrolling works and maybe thats part of the issue.

I tested it on macOS via trackpad and not sure if this happens as well on Android, iOS, Windows or web.

  • Create a table with multiple entries and columns
  • Scroll via touchpad

Current behaviour
Table is not scrollable

Expected behaviour
Table will scroll

fast smooth scroll

Hello dear @caduandrade , thank you for easy table packages. Everything is fine, but this package's scroll behavior is very heavy and slow.
Can you suggest how we can make it faster and smoother like pluto_grid?
I appreciate your help a lot

Scrollbars

Hi again!

I think I found a small bug with the color of the scrollbars.

  • Scrollbars does not react to dark theme

Besides that I have some questions

  • Is it possible to show scrollbars only if needed especially horizonal one?
  • Is it possible to customize some styles for scrollbars? This would be not needed that much if it would react to dark mode in my opinion

[Feature] OnLastItem

Hi,

It would be nice to have a callback when we rendered the last item. This would be useful for infinite scrolling.

Since we provide an item collection instead of a builder function its not that easy to implement.
Only with workarounds like checking in every item onInit for index.

Feature request: filtering (search)

Hi,

this package seems like really nice data table, but there is no mention of filtering (i.e. searching) functionality? Is it planned or I'm missing something?

Actually, I'm trying currently bunch of Flutter datatables, and almost all missing decent search/filter capability. But filtering data in the tables is a really daily task for many apps, and should be must have. The greatest benefit comes from ability to filter by multple columns at the same time. (I think only pluto_grid can do this).

If multple columns search will be in the next versions of easy_table, that will be a killing feature in my opinion.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.