Material design - Data tables

Question

I'm trying to design website using Google's material design guidelines. On desktop, my site is basically navigation drawer (on the left), header (app bar) and the content area. All what I want to display in content area is a data table with a lot of rows, while keeping table header always visible when scrolling. Every row is to be select-able by check-box and when that happens, action controls shall appear.

And this is where I'm struggling. Where to place the action controls when a row is selected? Placing them into app bar to the right is out of option - it could be too far away from check-box for user to see that something happened.

I could add header to the table (as Google suggests - https://www.google.com/design/spec/components/data-tables.html#data-tables-tables-within-cards) and when user selects a row, the header would display actions instead. However, I have a feeling that this would take up too much space when displayed on smartphone. Also, I believe that on smartphone, app bar is the place to put the action controls.

Please, I would welcome any idea how to approach this :-)

Answer 1

Adding controls to the header would be one way of doing this, and it depends on the number of actions / relevance to the selected row of whether it belongs there. If there are too many to fit on a mobile device, I would suggest adding it as a slide up section, similar to the bottom sheet.

While on desktop, this section could be larger and more informative, and for mobile, it could be reduced down to simply the action/icon.

Answer 2

Overlay the row immediately below the one selected with a horizontal list of the Actions as 'buttons'. Make it clear it's an overlay, and make sure that dismissing it is easy enough to see how to do, too.

Animate its reveal from the point of selecting the row.

If the row selected is right at the bottom of the screen, animate it up one row off the bottom edge of the screen before animating in the Action Overlay.