diff --git a/src/wuttaweb/grids/base.py b/src/wuttaweb/grids/base.py
index fcfff93..6bf7274 100644
--- a/src/wuttaweb/grids/base.py
+++ b/src/wuttaweb/grids/base.py
@@ -2041,9 +2041,9 @@ class Grid:
         """
         Render a simple Vue table element for the grid.
 
-        This is what you want for a "simple" grid which does require a
-        unique Vue component, but can instead use the standard table
-        component.
+        This is what you want for a "simple" grid which does not
+        require a unique Vue component, but can instead use the
+        standard table component.
 
         This returns something like:
 
@@ -2227,6 +2227,35 @@ class Grid:
                             'order': sorter['dir']})
         return sorters
 
+    def get_vue_first_sorter(self):
+        """
+        Returns the first active sorter, if applicable.
+
+        This method is used to declare the initial sort for a simple
+        table component, i.e. for use with the ``table-element.mako``
+        template.  It generally is assumed that frontend sorting is in
+        use, as opposed to backend sorting, although it should work
+        for either scenario.
+
+        This checks :attr:`active_sorters` and if set, will use the
+        first sorter from that.  Note that ``active_sorters`` will
+        *not* be set unless :meth:`load_settings()` has been called.
+
+        Otherwise this will use the first sorter from
+        :attr:`sort_defaults` which is defined in constructor.
+
+        :returns: The first sorter in format ``[sortkey, sortdir]``,
+           or ``None``.
+        """
+        if hasattr(self, 'active_sorters'):
+            if self.active_sorters:
+                sorter = self.active_sorters[0]
+                return [sorter['key'], sorter['dir']]
+
+        elif self.sort_defaults:
+            sorter = self.sort_defaults[0]
+            return [sorter.sortkey, sorter.sortdir]
+
     def get_vue_filters(self):
         """
         Returns a list of Vue-compatible filter definitions.
diff --git a/src/wuttaweb/templates/grids/table_element.mako b/src/wuttaweb/templates/grids/table_element.mako
index 3c40338..c964089 100644
--- a/src/wuttaweb/templates/grids/table_element.mako
+++ b/src/wuttaweb/templates/grids/table_element.mako
@@ -1,5 +1,22 @@
 ## -*- coding: utf-8; -*-
-<${b}-table :data="gridContext['${grid.key}'].data">
+<div>
+
+  % if grid.tools:
+      <div class="table-tools-wrapper">
+        % for html in grid.tools.values():
+            ${html}
+        % endfor
+      </div>
+  % endif
+
+<${b}-table :data="gridContext['${grid.key}'].data"
+
+            ## sorting
+            % if grid.sortable:
+                :default-sort="${grid.get_vue_first_sorter() or 'null'}"
+            % endif
+
+            icon-pack="fas">
 
   % for column in grid.get_vue_columns():
       % if not column['hidden']:
@@ -52,3 +69,5 @@
   </template>
 
 </${b}-table>
+
+</div>
diff --git a/tests/grids/test_base.py b/tests/grids/test_base.py
index 167ba8c..2e336d0 100644
--- a/tests/grids/test_base.py
+++ b/tests/grids/test_base.py
@@ -1610,6 +1610,50 @@ class TestGrid(WebTestCase):
         sorters = grid.get_vue_active_sorters()
         self.assertEqual(sorters, [{'field': 'name', 'order': 'asc'}])
 
+    def test_get_vue_first_sorter(self):
+
+        # empty by default
+        grid = self.make_grid(key='foo', sortable=True)
+        sorter = grid.get_vue_first_sorter()
+        self.assertIsNone(sorter)
+
+        # will use first element from sort_defaults when applicable...
+
+        # basic
+        grid = self.make_grid(key='foo', sortable=True, sort_defaults='name')
+        sorter = grid.get_vue_first_sorter()
+        self.assertEqual(sorter, ['name', 'asc'])
+
+        # descending
+        grid = self.make_grid(key='foo', sortable=True, sort_defaults=('name', 'desc'))
+        sorter = grid.get_vue_first_sorter()
+        self.assertEqual(sorter, ['name', 'desc'])
+
+        # multiple
+        grid = self.make_grid(key='foo', sortable=True, sort_defaults=[('key', 'asc'), ('name', 'asc')])
+        sorter = grid.get_vue_first_sorter()
+        self.assertEqual(sorter, ['key', 'asc'])
+
+        # will use first element from active_sorters when applicable...
+
+        # basic
+        grid = self.make_grid(key='foo', sortable=True)
+        grid.active_sorters = [{'key': 'name', 'dir': 'asc'}]
+        sorter = grid.get_vue_first_sorter()
+        self.assertEqual(sorter, ['name', 'asc'])
+
+        # descending
+        grid = self.make_grid(key='foo', sortable=True)
+        grid.active_sorters = [{'key': 'name', 'dir': 'desc'}]
+        sorter = grid.get_vue_first_sorter()
+        self.assertEqual(sorter, ['name', 'desc'])
+
+        # multiple
+        grid = self.make_grid(key='foo', sortable=True)
+        grid.active_sorters = [{'key': 'key', 'dir': 'asc'}, {'key': 'name', 'dir': 'asc'}]
+        sorter = grid.get_vue_first_sorter()
+        self.assertEqual(sorter, ['key', 'asc'])
+
     def test_get_vue_filters(self):
         model = self.app.model