Comments (7)
Please provide minimal repro example
from data_table_2.
Following a basic sample.
When running for the WEB, Rows are always blue and mouse cursor does not change.
import 'package:data_table_2/data_table_2.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: PaginatedDataTable2(
dataRowHeight: 60,
columns: const [
DataColumn2(label: Text('Col1')),
DataColumn2(label: Text('Col2'))
],
source: SampleDataSource(),
));
}
}
class SampleDataSource extends DataTableSource {
@override
DataRow? getRow(int index) {
return DataRow2(
color: MaterialStateProperty.resolveWith<Color>((states) {
if (states.contains(MaterialState.pressed)) {
return const Color.fromRGBO(219, 250, 106, 1);
}
if (states.contains(MaterialState.hovered)) {
return Colors.red;
}
return Colors.blue;
}),
cells: const [
DataCell(Text("1")),
DataCell(Text("2")),
]);
}
@override
bool get isRowCountApproximate => false;
@override
int get rowCount => 10;
@override
int get selectedRowCount => 0;
}
from data_table_2.
You should have any tap events for the rows to start responding to mouse events (and trigger material state changes) + you should not return any default color (not sure why, that's the standard behaviour of the underlying InkWell).
import 'package:data_table_2/data_table_2.dart';
import 'package:flutter/material.dart';
class DataTable2SimpleDemo extends StatefulWidget {
const DataTable2SimpleDemo({super.key});
@override
State<DataTable2SimpleDemo> createState() => _DataTable2SimpleDemoState();
}
class _DataTable2SimpleDemoState extends State<DataTable2SimpleDemo> {
@override
Widget build(BuildContext context) {
return ColoredBox(
color: Colors.yellow,
child: PaginatedDataTable2(
dataRowHeight: 60,
wrapInCard: false,
columns: const [
DataColumn2(label: Text('Col1')),
DataColumn2(label: Text('Col2'))
],
source: SampleDataSource(),
));
}
}
class SampleDataSource extends DataTableSource {
@override
DataRow2? getRow(int index) {
return DataRow2(
onTap: () {},
color: MaterialStateProperty.resolveWith<Color?>((states) {
if (states.contains(MaterialState.pressed)) {
return const Color.fromRGBO(219, 250, 106, 1);
} else if (states.contains(MaterialState.hovered)) {
return Colors.red;
}
return null;
}),
cells: const [
DataCell(Text("1")),
DataCell(Text("2")),
]);
}
@override
bool get isRowCountApproximate => false;
@override
int get rowCount => 10;
@override
int get selectedRowCount => 0;
}
![image](https://private-user-images.githubusercontent.com/7947027/294762966-51dbd0fd-aa07-4713-a7e6-a06ce7f5d931.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc1MDMwMTcsIm5iZiI6MTcxNzUwMjcxNywicGF0aCI6Ii83OTQ3MDI3LzI5NDc2Mjk2Ni01MWRiZDBmZC1hYTA3LTQ3MTMtYTdlNi1hMDZjZTdmNWQ5MzEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYwNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MDRUMTIwNTE3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZTBlMWI2YTRhZGNkNTBjNjFhYzNjZDUwMWNkZWU4ODk1YjZmNDA5ZjZkMzNlYmVjMzZkZjFjNDVjN2NmYjhhNCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.GvBK57vGax6SJVeS2cpBSsIfjc-2MyS9-HK6fuBLd1Q)
from data_table_2.
Tx you for you quick answer and the great support. it works on my side too.
I still need to have the "row hover" feature working with the rounded corner rows.
How to mix those 2 features ?
Adding the decoration property with ShapeBorder + color property regarding state give the following result :
![image](https://private-user-images.githubusercontent.com/153679/294766359-5467d13b-7023-430b-aae7-dc07e92c2aec.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc1MDMwMTcsIm5iZiI6MTcxNzUwMjcxNywicGF0aCI6Ii8xNTM2NzkvMjk0NzY2MzU5LTU0NjdkMTNiLTcwMjMtNDMwYi1hYWU3LWRjMDdlOTJjMmFlYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjA0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYwNFQxMjA1MTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04YmM1Y2E4Y2EyNzJmMDljY2FmMTdiYzc0ZWRlMGIyYmVhNmFhNDE3Zjg3MGU2ZmUyMzE1MmQ5ZWEzMjc2ZmMzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.Hj70ILYiZPnYui7XW5mJ7JnDgYXUxMyC6uR2PPks_Rg)
from data_table_2.
I don't think you can achieve rounded corners on the hover effect using current widget. The best you can do is use row decoration with rounded corners and semi-transparent color and rectangular hover color behind.
It might be reasonable for you to go with the route of creating a custom widget controlling the looks of widgets
from data_table_2.
Did you mean I need to create my own DataTable widget to fully implement the requested design ? (It was my next idea :))
from data_table_2.
Create a custom layout with widgets that create the desired look, it doesn't have to be DataTable
from data_table_2.
Related Issues (20)
- Hide empty rows HOT 2
- Update data row in AsyncDataTableSource HOT 1
- Hide scrollbar HOT 1
- How to have selected rows on table create with AsyncDataTableSource? HOT 1
- Center the header title is "impossible" due to the invisible sorting arrow HOT 4
- isHorizontalScrollBarVisible & isVerticalScrollBarVisible for AsyncPaginatedDataTable2 HOT 6
- Horizontal Scroll in Table with mouse wheel
- How do I make DataRow2 react to Theme changes? HOT 6
- DataRow2 decoration property improvement HOT 2
- Alignment center HOT 3
- Visibility of scroll indicator HOT 1
- Column is not handled by HorizontalScrollController
- Adding a TextField to DataRow2 and implementing onSubmitted doesn't listen to the Enter key next to the numeric keypad.
- InfiniteScroll And PullToRefresh implementation
- AsyncDataTableSource.selectAll() seems that not update _selectionRowKeys correctly
- DataTable2 with SliverMainAxisGroup/SliverToBoxAdapter non-zero flex but incoming height constraints are unbounded HOT 4
- DataCell onTap is slow / laggy HOT 1
- Only start stopwatch when dataTableShowLogs && kDebugMode is true HOT 1
- [Feature Request] Grouping HOT 1
- Support merged cells, colSpan rowSpan
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from data_table_2.