IsTable

---

• A flutter package to render table, this is easy to use and fully customizable.
• We are still developing more features

Table Widget for Flutter

A customizable and easy-to-use table widget for Flutter that supports Android, iOS,Desktop and web platforms.

Features

• Customization: Customize the appearance of the table to match your app's design.
• Cross-platform: Works seamlessly on Android, iOS, and web platforms.
• Easy-to-use: Simple API for adding tables to your Flutter app.
• Scrollable and many more

Supported platforms

• Android
• Ios
• Web
• Desktop

Getting Started

---

Installation

• Add this to your pubspec.yaml file:

dependencies:
  flutter_table_widget: latest

• Add using command

  $ flutter pub add is_table

• Import it in your file

  import 'package:is_table/is_table.dart'; 

Usage

---

LayoutBuilder(
          builder: (context, constraints) {
            return IsTable(
              gapBetweenHeaderBody: 8,
              tableHeight: constraints.maxHeight,
              tableWidth: 200,
              isTableBody: [
                ...[
                  {
                    "name": "Sk Ismile",
                    "city": "Kolkata",
                    "designation": "Software Developer",
                    "company": "Blue Horse Software",
                    "department": "Backend",
                    'experience': "2yrs",
                    'age': "26"
                  },
                  {
                    "name": "Sk Ismile",
                    "city": "Banglore",
                    "designation": "Software Developer",
                    "company": "Google",
                    "department": "AI",
                    'experience': "5yrs",
                    'age': "27"
                  },
                ].map((item) {
                
                  return IsTableRow(
                      rowMargin: const EdgeInsets.only(bottom: 12),
                      rowStyle: BoxDecoration(
                          color: Colors.white,
                          boxShadow: [
                            BoxShadow(
                                blurRadius: 3,
                                offset: const Offset(1, 3),
                                color: Colors.black.withOpacity(0.2))
                          ]),
                      rowPadding: const EdgeInsets.only(left: 50),
                      tableRowWidth: constraints.maxWidth,
                      tdContent: [
                        IsTableCell(
                          isTableDataType: IsTableDataType.bodyContent,
                          width: constraints.maxWidth * 0.2,
                          primaryContent: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text("${item['name']}",
                                  textAlign: TextAlign.start,
                                  overflow: TextOverflow.ellipsis,
                                  style: GoogleFonts.inter(
                                      fontSize: 16,
                                      fontWeight: FontWeight.w500)),
                              Text("$item['department']",
                                  textAlign: TextAlign.start,
                                  // softWrap: true,
                                  overflow: TextOverflow.ellipsis,
                                  style: GoogleFonts.inter(
                                      fontSize: 10,
                                      fontWeight: FontWeight.w400)),
                            ],
                          ),
                        ),
                        IsTableCell(
                          isTableDataType: IsTableDataType.bodyContent,
                          width: constraints.maxWidth * 0.2,
                          primaryContent: Text("${item['company']}",
                              textAlign: TextAlign.start,
                              overflow: TextOverflow.ellipsis,
                              style: GoogleFonts.inter(
                                  fontSize: 16, fontWeight: FontWeight.w500)),
                        ),
                        IsTableCell(
                            isTableDataType: IsTableDataType.bodyContent,
                            width: constraints.maxWidth * 0.2,
                            primaryContent: Text("${item['designation']}",
                                textAlign: TextAlign.start,
                                overflow: TextOverflow.ellipsis,
                                style: GoogleFonts.inter(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w500))),
                        IsTableCell(
                            isTableDataType: IsTableDataType.bodyContent,
                            width: constraints.maxWidth * 0.2,
                            primaryContent: Text("${item['city']}",
                                textAlign: TextAlign.start,
                                overflow: TextOverflow.ellipsis,
                                style: GoogleFonts.inter(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w500))),
                        IsTableCell(
                            isTableDataType: IsTableDataType.bodyContent,
                            width: constraints.maxWidth * 0.15,
                            primaryContent: Text("${item['age']}",
                                textAlign: TextAlign.start,
                                overflow: TextOverflow.ellipsis,
                                style: GoogleFonts.inter(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w500))),
                      ]);
                })
              ],
              isTableHeader: IsTableHeader(
                headerPadding: const EdgeInsets.only(left: 50),
                headerStyle: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(4),
                    topRight: Radius.circular(4),
                  ),
                ),
                tableHeaderWidth: constraints.maxWidth,
                tdContent: [
                  IsTableCell(
                    isTableDataType: IsTableDataType.headerContent,
                    primaryContent: const Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          "Name",
                          textAlign: TextAlign.start,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.black54,
                          ),
                        ),
                        Icon(
                          Icons.swap_vert,
                          color: Color(0xfff28e2c),
                        )
                      ],
                    ),
                    width: constraints.maxWidth * 0.2,
                  ),
                  IsTableCell(
                    isTableDataType: IsTableDataType.headerContent,
                    primaryContent: const Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          "Company",
                          textAlign: TextAlign.start,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.black54,
                          ),
                        ),
                        Icon(
                          Icons.swap_vert,
                          color: Color(0xfff28e2c),
                        )
                      ],
                    ),
                    width: constraints.maxWidth * 0.2,
                  ),
                  IsTableCell(
                    isTableDataType: IsTableDataType.headerContent,
                    primaryContent: const Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          "Designation",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.black54,
                          ),
                        ),
                        Icon(
                          Icons.swap_vert,
                          color: Color(0xfff28e2c),
                        )
                      ],
                    ),
                    width: constraints.maxWidth * 0.2,
                  ),
                  IsTableCell(
                    isTableDataType: IsTableDataType.headerContent,
                    primaryContent: const Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          "City",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.black54,
                          ),
                        ),
                        Icon(
                          Icons.swap_vert,
                          color: Color(0xfff28e2c),
                        )
                      ],
                    ),
                    width: constraints.maxWidth * 0.2,
                  ),
                  IsTableCell(
                    isTableDataType: IsTableDataType.headerContent,
                    primaryContent: const Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          "Age",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.black54,
                          ),
                        ),
                        Icon(
                          Icons.swap_vert,
                          color: Color(0xfff28e2c),
                        )
                      ],
                    ),
                    width: constraints.maxWidth * 0.15,
                  ),
                ],
              ),
            );
          },
        )

Demo Image

Author & support

---

This project is created by Sk Ismile If you appreciate my work you can connect and endorse me on LinkedIn to keep me motivated :)

if find any bug or issue feel free to sent you feedback my email : sk.ismile75@gmail.com