is_table

Description:

is table

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
copied to clipboard

Add using command

$ flutter pub add is_table
copied to clipboard

Import it in your file

import 'package:is_table/is_table.dart';
copied to clipboard
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,
),
],
),
);
},
)
copied to clipboard
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 : [email protected]