This library allows you to create editable tables and spreadsheets with ease, either by providing initial row and column count to display an empty table or use it with predefined rows and column data sets.

Overview

Editable

⚡️ A highly customizable, editable table package for Flutter projects.

Specs

pub

This package allows you to create editable tables and spreadsheets with ease, either by providing inital row and column count to display an empty table, or use it with predefined rows and column data sets.

It is compatible with Flutter Desktop (Windows, Linux, MacOS), IOS, Android, and Web. ❤️

Features

  • Save Edited Rows
  • Save Edited cell
  • Customize cell data
  • Add Empty rows
  • Create Empty tables
  • Customizable Save button
  • Customize Table headers
  • Zebra - Stripe table
  • Style table border
  • Adjustable Column widths

Spread Some ❤️

GitHub followers

Support us

You can buy us a cup of coffee. Sponsor our next milestones

Patreon

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  editable: "^1.1.4"

In your library add the following import:

import 'package:editable/editable.dart';

API

Create Table

To create a new table, use the Editable() widget class and provide the table data properties as follows:

  • column: an array of objects example example:

    List cols = [
      {"title":'Name', 'widthFactor': 0.2, 'key':'name'},
      {"title":'Date', 'widthFactor': 0.1, 'key':'date'},
      {"title":'Month', 'widthFactor': 0.1, 'key':'month'},
      {"title":'Status',  'key':'status'},
    ]; 

    [title] is the column heading

    [widthFactor] a custom size ratio of each column width, if not provided, defaults to [columnRatio = 0.20] dart 'widthFactor': 0.1 //gives 10% of screen size to the column 'widthFactor': 0.2 //gives 20% of screen size to the column

    [key] an identifyer preferably without space and special characters

  • rows: an array of objects, where each object key represents a column [key], example:

    List rows = [
        {"name": 'James Joe', "date":'23/09/2020',"month":'June',"status":'completed'},
        {"date":'12/4/2020',"month":'March',"name": 'Daniel Paul', "status":'new'},
      ];

    Each objects DO NOT have to be positioned in same order as its column

  • rowCount: Interger value of number of rows to be generated: Optional if row data is provided

  • columnCount: Interger value of number of columns to be generated: Optional if column data is provided

  • columnRatio: fraction of the screen width occupied by each column. This is usefull for shrinking and expanding table width example:

      columnRation: 0.2 //sets each column to occupy 20 percent of screen width

Customization

  • borderColor: Color of table border

  • borderWidth: width of table borders

  • tdPaddingLeft: Table data cell padding left

  • tdPaddingTop: Table data cell padding top

  • tdPaddingRight: Table data cell padding right;

  • tdPaddingBottom: Table data cell padding bottom;

  • tdAlignment: Aligns the table data ;

  • tdStyle: Style the table data;

  • thPaddingLeft: Table header cell padding left;

  • thPaddingTop: Table header cell padding top;

  • thPaddingRight: Table header cell padding right;

  • thPaddingBottom: Table header cell padding bottom;

  • trHeight: Table Row Height, cannot be less than 40.0 ;

  • thWeight: Table headers fontweight;

  • thSize: Table headers fontSize;

  • tdEditableMaxLines : Max lines allowed in editable text, default: 1 (longer data will not wrap and be hidden), setting to 100 will allow wrapping and not increase row size;

  • showSaveIcon: Toogles the save button, if [true] displays an icon to save rows, adds an addition column to the right

  • saveIcon: Icon for to save row data, example: dart saveIcon : Icons.add

  • saveIconColor: Color for the save Icon

  • saveIconSize: Size for the saveIcon

  • showCreateButton: displays a button that adds a new row onPressed

  • stripeColor1: The first row alternate color, if stripe is set to true

  • stripeColor2: The Second row alternate color, if stripe is set to true;

  • zebraStripe: Enable zebra-striping, set to false by default // if zebraStripe is enabled, you can style the colors [stripeColor1] and [stripeColor2]

  • createButtonAlign: Aligns the button for adding new rows;

  • createButtonIcon: Icon displayed in the create new row button;

  • createButtonColor: Color for the create new row button;

  • createButtonShape: border shape of the create new row button createButtonShape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8) )

  • createButtonLabel: Label for the create new row button

Save methods

  • onSubmitted: [onSubmitted] callback is triggered when the enter button is tapped (for desktop users) Or when edit is complete(on mobile) on a table data cell it returns a value of the edited cell data

  • onRowSaved: [onRowSaved] callback is triggered when a [saveButton] is pressed. returns only values if row is edited, otherwise returns a string ['no edit']

  • EditableState key: To get all Edited Rows outside the current context, you can access the editable state using a GlobalKey, example:

         /// Create a Key for EditableState
        final _editableKey = GlobalKey<EditableState>(); 
    
      
        /// Function to add a new row
        /// Using the global key assigined to Editable widget
        /// Access the current state of Editable
        void _addNewRow() {
          setState(() {
            _editableKey.currentState.createRow();
          });
        }
    
        ///Print only edited rows.
        void _printEditedRows() {
          List editedRows = _editableKey.currentState.editedRows;
          print(editedRows);
        }
    
          @override
        Widget build(BuildContext context) {
          return Scaffold(
            appBar: AppBar(
              leadingWidth: 200,
              leading: FlatButton.icon(
                  onPressed: () => _addNewRow(),
                  icon: Icon(Icons.add),
                  label: Text(
                    'Add',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )),
              title: Text(widget.title),
              actions: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: FlatButton(
                      onPressed: () => _printEditedRows(),
                      child: Text('Print Edited Rows',
                          style: TextStyle(fontWeight: FontWeight.bold))),
                )
              ],
            ),
            body: Editable(
              key: _editableKey, //Assign Key to Widget
              columns: cols,
              rows: rows,
              zebraStripe: true,
              stripeColor2: Colors.grey[200],
              borderColor: Colors.blueGrey,
            ),
          );
        }
    

Screenshots

Editable Table with Data (zebraStripe) Empty SpreadSheet (zebraStripe) Empty SpreadSheet (No Stripe)
Table with Save Icon

Tutorials

The Following are resources to help you build with Editable:

Contribution

I highly encourage the community to step forward and improve this library further. You can fix any reported bug, propose or implement new features, write tests, etc.

Here is a quick list of things to remember

  • Check the open issues before creating a new one,
  • Help me in reducing the number of open issues by fixing any existing bugs,
  • Check the roadmap to see if you can help in implementing any new feature,
  • You can contribute by writing unit and integration tests for this library,
  • If you have any new idea that aligns with the goal of this library, feel free to raise a feature request and discuss it.

Author

This Editable table package for Flutter is developed by Godwin Asuquo

Contributors

CY Uket AmitB Tim Maffet Thumbert ❤️ Thank you all for your contributions

Also, as always, please give us a star to help!

Comments
  • How to get all the values written in the cells

    How to get all the values written in the cells

    I've tried using the onSubmitted and onRowSaved functions (but I'm not using SaveIcon).

    I'm basically trying to figure out how to capture all the values entered in the cells, and print a List, for later use.

    So, similar to how it is printed by onRowSaved (but I don't want to use this method because if the table has 100 rows, the user must press 100 SaveIcon).

    I was thinking of putting the only button on the final screen, so when it was pressed, I could print this list with the values on my VSCode. But I don't know how to get these values, only having these two methods available (onSubmitted and onRowSaved).

    My Screen: tab

    My desired exit: List rows = [ {0: 100, 1: 200, 2: 300, 3: 400, 4: 500}, {0: 10, 1: 20, 2: 30, 3: 40, 4: 50}, ];

    enhancement 
    opened by viniciushenr 5
  • Format package files as per dart formatting and provide example for the package

    Format package files as per dart formatting and provide example for the package

    1)Formatted dart files as per dartfmt 2)Added example for the package

    This commit will thus increase the score of your package by 20 and will make it 110/110!

    @godilite please have a look.

    opened by Amitbhave 3
  • add non-editable columns and focusedBorder

    add non-editable columns and focusedBorder

    Hi,

    Thanks for the package. I realized I needed columns that are non-editable, so I added a bool for this. I've also added the ability to specify a focusBorder for the cell you are editing (I think it looks nicer -- and is more similar to what a spreadsheet looks like.)

    Please take a look at line 112 in table_body.dart, I don't know how to get the fontSize to match with the fontSize of the TextFormField. You may need to fix that.

    Things that would be nice to have:

    1. Ability to drag a cell down to populate empty cells
    2. Some basic Copy/Paste/Undo functionality I'm just learning Flutter, so probably these are above my skill level as of now, but I'll open a ticket with suggestions.

    Best regards, Tony

    opened by thumbert 2
  • Performance issues

    Performance issues

    I tried to use this library to display some basic data from a database. There were around 8 columns and a maximum of around 100 rows.

    The problem is that its not possible to use the "table" with more than around 5 rows. Whenever scrolling is necessary, everything just becomes extremely laggy. It uses such high amounts of CPU that some devices/browsers even show a performance impact message. Scrolling is not even possible when the number of rows is >50, it then runs with <1FPS.

    I looked at the code and found 2 mayor problems:

    1. The rows are wrapped in a "Column" widget. This is super inefficient. I replaced it with a Listview.builder and got a huge performance increase.
    2. The textinputfields in every cell are somehow pretty hard to render. Replacing them with standard text widgets leads to a massive gain in performance. However, the edit functionality is lost, which is why I transformed the "save" button into a "popupmenubutton" and introduced the options edit/delete.

    Combining both points, everything works smooth like it should. Since point 2 is somewhat a conceptional change, I would at least recommend point 1.

    opened by Uni2K 1
  • showSaveIcon: true, adds some space in table rows, but not in table headers.

    showSaveIcon: true, adds some space in table rows, but not in table headers.

    showSaveIcon: true, adds one column in table rows, but not in table headers. And as Flex: 1 is used in headers, if there are 4 headers, each will take total 1/4th of the space, but in rows, some space will go for the save icon. Result:

    Screenshot_1601839050

    opened by Amitbhave 1
  • Be able to set Widgets in the Cols

    Be able to set Widgets in the Cols

    Make it possible to set Widgets in the Cols

    List cols = [
        {
          "title": Text("Name"),
          'widthFactor': 0.3,
          'key': 'name',
          'editable': true
        },];
    
    opened by corusm 0
  • A few fixes and enhancements to header and data styling

    A few fixes and enhancements to header and data styling

    I have fixed a couple existing bugs with styling (zebra stripes did not cover cell on editable data rows when non-editable rows wrapped, zebra stripes were still visible on non-editable rows when stripes turned off, maybe others, see code/comments)

    I have also added support for completely controlling the style and alignment of the table headers.

    I also made changes so that when styling/alignment is specified for table data then it is ALSO used by the non editable columns.

    Added support for specifying max lines for editable data cells so that they can wrap and have all data visible.

    Added some small changes to example to illustrate some of these capabilities/fixes.

    All changes were made to ensure that all existing behavior stays the same when the features are not used. (The data styling is now used for NON-editable table data however, but that seems like a bug when it wasn't used)

    Thanks for the widget!

    opened by timmaffett 0
  • Merge dev branch into master

    Merge dev branch into master

    hi there, thanks a lot for this great component! We're using it atm per pic attached. We also need the ability to disable editing on a certain column - can you please merge 'dev' into 'master' so we can access this feature ?

    IMG_559AD93C81EC-1

    opened by SogoGolf 0
  • Does Not Work With Forms

    Does Not Work With Forms

    I been trying to get editable working with a flutter form, but when I add the editable class to my form I would get a whole bunch of errors saying that it could not be rendered. However, it would work fine if it is in a scaffold or anything else. Why is this?

    Here is the entire error log: https://media.nyxgoddess.org/talI2/gahEbIla65.

    opened by SrS2225a 0
  • Add additional row callbacks

    Add additional row callbacks

    Hi, can you please add additional row callbacks for this flutter package?

    Proposed row callbacks

    • onRowAdded
    • onRowRemoved

    PS: Also a "table footer" to summarize data :)

    opened by adummy832 0
  • Rows doesn't get reponse data

    Rows doesn't get reponse data

    Hi,

    I'm getting data from API like I wrote down.

     Future<String> getDataTableProvider(context) async {
        final response = await http.post(Uri.parse('https://**/DENEME.php'), body: {'tablename': 'TABLENAME'});
    
         rows = json.decode(response.body);
        print(rows);
        print("Data download successfully");
        return Future.value("Data download successfully");
      }
    

    But Editable rows don't accept that row variable, turns rows as null. When I copy print of rows (print(rows);) and use it to define rows like;

    rows = [
        {
          "name": 'James LongName Joe',
          "date": '23/09/2020',
          "month": 'June',
          "status": 'completed'
        },
        {
          "name": 'Daniel Paul',
          "month": 'March',
          "status": 'new',
          "date": '12/4/2020',
        },
        {
          "month": 'May',
          "name": 'Mark Zuckerberg',
          "date": '09/4/1993',
          "status": 'expert'
        },
        {
          "name": 'Jack',
          "status": 'legend',
          "date": '01/7/1820',
          "month": 'December',
        },
      ];
    

    It works. I can get the same data with the same format when I use "json.decode(response.body)" but it doesn't work. Why it could be? (rows variable defined as List. And response has a right shape which package example requires.)

    opened by arzukara 0
  • Saving data with SQFLite?

    Saving data with SQFLite?

    Is it possible to clear out how to manage & localize Editable data on device/cloud with SQFLite? I've watched Andrew Fitz Gibbon's tutorial although it wasn't clear enough.

    A tutorial or a document would be helpful. Thank you for creating such an amazing plugin for flutter.

    opened by AlonElayLatucha 0
Releases(v1.0.3)
Owner
Godwin Asuquo
Flutter | Laravel | Software Developer
Godwin Asuquo
Flutter package: Json Table Widget to create table from json array

Json Table Widget ?? Proudly Sponsored by FieldAssist Request a Demo This Flutter package provides a Json Table Widget for directly showing table from

Ayush P Gupta 193 Jan 7, 2023
Flutter-sorted-chips-row - Flutter library for rendering a row of Material "Chip" buttons that gets sorted according to the given function

sorted_chips_row A Flutter Widget displaying a row of Material Chips, sorted according to the provided comparison function. How to use Adding dependen

Callstack Incubator 29 Jul 29, 2021
A iOS like table view including section, row, section header and divider

flutter_section_table_view A iOS like table view including section, row, section header and divider Support both Android and iOS Support drop-down ref

刘彦博 73 Nov 4, 2022
A flutter plugin for improved row and column widgets with added spacing and optional interleaved dividers

flutter_series A flutter plugin for improved row and column widgets with added s

null 0 Nov 1, 2021
A widget based on Flutter's new Interactive Viewer that makes picture pinch zoom, and return to its initial size and position when released.

pinch_zoom A widget based on Flutter's new Interactive Viewer that makes picture pinch zoom, and return to its initial size and position when released

Teun Kortekaas 36 Dec 30, 2022
The COCO icon pack with - +600 Editable icons available for your flutter project.

cocoicons The COCO icon pack with - +600 Editable icons available for your flutter project. Made from COCO icon pack. ?? Installation In the dependenc

Samuel Abada 5 Sep 23, 2022
An rx stream builder widget that is able to pre-populate a flutter StreamBuilder with data from an rx stream if the stream is either a value or a replay observable.

An rx stream builder widget that is able to pre-populate a flutter StreamBuilder with data from an rx stream if the stream is either a value or a replay observable. For example the RX stream is a BehaviorSubject or a ReplaySubject.

Jon Samwell 8 Jan 22, 2022
Flutter empty template to start your project.

flutter_starter Flutter empty template to help you start your project. PACKAGES Packages I've used Getx Shimmer Shared Preferences Gap Flutter Localiz

martinoyovo 2 Dec 2, 2021
Simple app for my sons to practice the tables.

tables A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this i

Stephan E.G. Veenstra 0 Nov 24, 2021
The project of the empty template with Flutter has built the basic framework to realize the functions of internationalization, theme peeling etc.

flutter-bloc-app-template ?? The project of the empty template with Flutter has built the basic framework to realize the functions of internationaliza

Oleksii Shtanko 30 Dec 31, 2022
Boozin fitness - A sample app to that will pull data from Google Fit to get the steps count and calories burned

boozin_fitness A sample app to that will pull data from Google Fit to get the st

Abhishek Kumar Gupta 1 Nov 23, 2022
A flutter package that helps you create an on-boarding screen for your project within minutes just by providing a few parameters.

A flutter package that helps you create an on-boarding screen for your project within minutes just by providing a few parameters.

Sachin Kr. Shukla 40 Sep 27, 2022
A Flutter plugin for IOS and Android providing a simple way to display PDFs.

Pdf Viewer Plugin A Flutter plugin for IOS and Android providing a simple way to display PDFs. Features: Display PDF. Installation First, add pdf_view

Lucas Britto 56 Sep 26, 2022
Flutter package for Android and iOS allow you to show a wide range of hyperlinks either in the input field or in an article view

Tagtly package help you to detect a lot of hyperlink text such as.. email, url, social media tags, hashtag and more either when user type in text field or when appear a text read only.

Mohamed Nasr 4 Jul 25, 2022
A library that helps you have multiple snackbars as a column

multi_snackbar A set of commands that helps you display more than one snackbar at the same time. Getting Started Make a list of widgets: var widgets =

Armin 1 Dec 23, 2021
A Flutter widget to create an iOS settings-table (static TableView).

flutter_cupertino_settings A Flutter widget to create an iOS settings-table (static TableView). import 'package:flutter_cupertino_settings/flutter_cup

Matthias Rupp 234 Dec 28, 2022
Wraps Flutter shared_preferences plugin, providing a iOS Suite Name support, it's helpful for sharing data from App to Widget.

shared_preferences_ios_sn Wraps Flutter shared_preferences plugin and provides an iOS Suite Name support, it's helpful for sharing data from App to iO

null 3 Sep 14, 2022
This package adds CustomRefreshIndicator widget that allows you to create whatever indicator you want.

Custom Refresh Indicator A flutter package that allows you to easily create a custom refresh indicator widget. TLDR; ONLINE DEMO! QUICK START CustomRe

Kamil Klyta 315 Dec 16, 2022
Flutter package to create list of radio button, by providing a list of objects it can be a String list or list of Map.

Custom Radio Group List Flutter package to create list of radio button, by providing a list of objects it can be a String list or list of Map. Feature

Ashok Kumar Verma 0 Nov 30, 2021