How can this buying logic be achieved using drupal commerce and/or ubercart?
This isn't going to be easy to do with either Drupal Commerce or Ubercart. What you're proposing is a very specific, custom bulk Add to Cart form. You're going to have to code it yourself in a site-specific module. The closest you can get would be Commerce Cart Extras, but you'd still have to reformat it to look like your proposed grid and also to have a live updating order total in the footer.