⚠️ IMPORTANT: This package is currently in development and is part of the Tagflow ecosystem. For production use, please wait for v1.0.0.
🚧 Alpha Release: APIs may change frequently. Use with caution in production environments.
A Flutter package that provides enhanced HTML table rendering capabilities for the Tagflow HTML rendering engine.
- 🔄 Seamless integration with Tagflow core package
- 📊 Support for complex table structures
- 🎨 Customizable table styling
- 📱 Responsive table layouts
- 🏷️ Support for table headers, footers, and merged cells
- 🖼️ Border customization options
- 🎯 Background color support
Add this to your package's pubspec.yaml file:
dependencies:
tagflow_table: ^0.0.1import 'package:tagflow/tagflow.dart';
import 'package:tagflow_table/tagflow_table.dart';
void main() {
final html = '''
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
''';
final tagflow = Tagflow(
converters: [
TableConverter(),
// ... other converters
],
);
final widget = tagflow.toWidget(html);
}You can customize table appearance using TagflowTheme. There are several ways to do this:
final theme = TagflowTheme.fromTheme(
Theme.of(context),
additionalStyles: {
'table': TagflowStyle(
border: Border.all(color: Colors.grey),
margin: EdgeInsets.all(16),
),
'th': TagflowStyle(
backgroundColor: Colors.grey[200],
padding: EdgeInsets.all(8),
textStyle: TextStyle(fontWeight: FontWeight.bold),
),
'td': TagflowStyle(
padding: EdgeInsets.all(8),
alignment: Alignment.center,
),
},
);final theme = TagflowTheme.article(
baseTextStyle: Theme.of(context).textTheme.bodyMedium!,
headingTextStyle: Theme.of(context).textTheme.headlineMedium!,
additionalStyles: {
'table': TagflowStyle(
maxWidth: 800,
border: Border.all(color: Colors.grey[300]!),
margin: EdgeInsets.symmetric(vertical: 16),
),
},
);For complete control over styling:
final theme = TagflowTheme.raw(
styles: {
'table': TagflowStyle(
border: Border.all(color: Colors.blue),
borderRadius: BorderRadius.circular(8),
margin: EdgeInsets.all(16),
backgroundColor: Colors.grey[50],
),
'th': TagflowStyle(
padding: EdgeInsets.all(12),
backgroundColor: Colors.blue[50],
textStyle: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blue[900],
),
),
'td': TagflowStyle(
padding: EdgeInsets.all(12),
alignment: Alignment.center,
borderBottom: BorderSide(color: Colors.grey[300]!),
),
'tr:hover': TagflowStyle(
backgroundColor: Colors.blue[50]!.withOpacity(0.3),
),
),
defaultStyle: TagflowStyle(
textStyle: TextStyle(fontSize: 14),
),
namedColors: {
'table-border': Colors.grey[300]!,
'table-header': Colors.blue[50]!,
},
);You can apply the theme using TagflowThemeProvider:
TagflowThemeProvider(
theme: theme,
child: Tagflow(
converters: [
TableConverter(),
// ... other converters
],
html: htmlContent,
),
);Contributions are welcome! Please read our contributing guidelines before submitting pull requests.
This project is licensed under the MIT License - see the LICENSE file for details.