Responsive Tables

It’s a new year, and top of mind for me is my fav perennial problem of thinking about responsive tables. So via this StackExchange exchange I found a few new good pointer as well as did my own searches.

  • CodePen Material example that converts responsively to Material cards — doesn’t degrade well if you have too many columns or rows.
  • Tablesaw Github repo and npm package that has a variety of super fabulous responsive-ifying options.
  • Una Kravets knows all, and so her article on Material Data Tables is a solid reference post for how to get things done.
  • Roman Kamushken has a neat library that docks into Figma which makes Material-sketching quite fluid and seamless.
  • Solving the problem of draggable rows in Material tables appears to be unresolved, and a few solutions are here.
  • A specific implementation of Material table that has hierarchical rows (similar to Ant) is over here and it looks quite good.
  • More Material table options are over here and a few new stylistic twists can be found like a table caption and density options.
  • Syncfusion has a for-pay option with a table control that runs across many platforms that is nice because it’s “not free” and should work. Their Web widgets are IE11 compatible with ES6 Promise polyfill.
  • Vue Material has a good example of empty state handling which you can find in “Search and Empty State” within this view.
  • Tables can make you go a little crazy with how complex a problem they present if they’re interactive. Slava Shestopalov nails it here.
  • Molly Hellmuth makes things clearer with her list of tables best practices and includes a guide on pagination.
  • On the advice of Barry Bassin, I’ve been told that Ant has tables that are the bees knees so I looked over them today and get it.
  • Dragging rows around is always a kind of awesome thing to do right. I noted that Ant uses a touch control icon that’s hamburger-y.
Playing with the Ant Table control is quite soothing.