diff --git a/package.json b/package.json
index c9f4e1962..a16d3f015 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
+    "@tanstack/react-table": "^8.20.5",
     "@tippyjs/react": "^4.2.6",
     "chalk": "^4.1.2",
     "clsx": "^2.1.1",
diff --git a/src/components/DataTable/DataTable.module.css b/src/components/DataTable/DataTable.module.css
index dd2170c2e..23c3f8777 100644
--- a/src/components/DataTable/DataTable.module.css
+++ b/src/components/DataTable/DataTable.module.css
@@ -6,6 +6,7 @@
  * DataTable
  */
 
+
  /* Visible table caption */
 .data-table__caption-container {
   display: flex;
@@ -37,7 +38,6 @@
 }
 
 .data-table__table {
-  border: 1px solid;
   width: 100%;
 
   .data-table__caption + &,
@@ -50,11 +50,67 @@
   width: calc(var(--eds-size-34) / 16 * 1rem);
 }
 
+.data-table--tableStyle-border {
+  /* TODO-AH: token for 1px */
+  border: 1px solid;
+}
+
+.data-table__header-cell {
+  font: var(--eds-theme-typography-title-md);
+  text-align: left;
+
+  .data-table--size-sm & {
+    padding: calc(var(--eds-size-half) / 16 * 1rem) calc(var(--eds-size-1) / 16 * 1rem);
+  }
+
+  .data-table--size-md &{
+    padding: calc(var(--eds-size-2) / 16 * 1rem);
+  }
+}
+
+.data-table__cell {
+  font: var(--eds-theme-typography-body-md);
+
+  .data-table--size-sm & {
+    padding: calc(var(--eds-size-half) / 16 * 1rem) calc(var(--eds-size-1) / 16 * 1rem);
+  }
+
+  .data-table--size-md &{
+    padding: calc(var(--eds-size-2) / 16 * 1rem);
+  }
+}
+
+.data-table__row {
+  .data-table--rowStyle-lined & {
+    border-bottom: 1px solid;
+  }
+
+  .data-table--rowStyle-striped &:nth-child(even) {
+    background-color: var(--eds-theme-color-background-table-row-stripe-2);
+  }
+
+  .data-table--rowStyle-striped &:nth-child(odd) {
+    background-color: var(--eds-theme-color-background-table-row-stripe-1);
+  }
+}
+
+.data-table__header-row {
+  border-bottom: 1px solid;
+  /* TODO-AH: figure out positioning styles for sticky headers/columns */
+  position: sticky;
+  top: 0;
+}
+
 /**
  * Color Tokens
  */
 .data-table {
   display: block;
+  position: relative;
+
+  .data-table__table {
+    background-color: var(--eds-theme-color-background-utility-base-1);
+  }
 
   .data-table__caption {
     color: var(--eds-theme-color-text-utility-default-primary);
@@ -63,4 +119,20 @@
   .data-table__subcaption {
     color: var(--eds-theme-color-text-utility-default-secondary);
   }
+
+  .data-table--tableStyle-border, .data-table__header-row {
+    border-color: var(--eds-theme-color-border-utility-default-low-emphasis);
+  }
+
+  .data-table__header-cell {
+    color: var(--eds-theme-color-text-utility-default-primary);
+  }
+
+  .data-table__cell {
+    color: var(--eds-theme-color-text-utility-default-primary);
+  }
+
+  .data-table--rowStyle-lined {
+    color: var(--eds-theme-color-border-utility-default-low-emphasis);
+  }
 }
diff --git a/src/components/DataTable/DataTable.stories.tsx b/src/components/DataTable/DataTable.stories.tsx
index 38c077a98..d0215584a 100644
--- a/src/components/DataTable/DataTable.stories.tsx
+++ b/src/components/DataTable/DataTable.stories.tsx
@@ -1,8 +1,15 @@
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { StoryObj, Meta } from '@storybook/react';
+
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
 import React from 'react';
 
-import { DataTable } from './DataTable';
+import { DataTable, type DataTableProps } from './DataTable';
 import { chromaticViewports } from '../../util/viewports';
 import Button from '../Button';
 import Menu from '../Menu';
@@ -24,7 +31,172 @@ export default {
     actions: {
       control: false,
     },
+    children: {
+      control: false,
+    },
+  },
+} as Meta<Args>;
+
+type Args = DataTableProps;
+
+type Person = {
+  firstName: string;
+  lastName: string;
+  age: number;
+  visits: number;
+  progress: number;
+};
+
+const defaultData: Person[] = [
+  {
+    firstName: 'Tanner',
+    lastName: 'Lindsey',
+    age: 24,
+    visits: 100,
+    progress: 50,
+  },
+  {
+    firstName: 'Tandy',
+    lastName: 'Miller',
+    age: 40,
+    visits: 40,
+    progress: 80,
+  },
+  {
+    firstName: 'Joe',
+    lastName: 'Dirte',
+    age: 45,
+    visits: 20,
+    progress: 10,
   },
+];
+
+const columnHelper = createColumnHelper<Person>();
+
+const columns = [
+  columnHelper.accessor('firstName', {
+    cell: (info) => info.getValue(),
+    header: () => <span>First Name</span>,
+    footer: (info) => info.column.id,
+  }),
+  columnHelper.accessor((row) => row.lastName, {
+    id: 'lastName',
+    cell: (info) => <i>{info.getValue()}</i>,
+    header: () => <span>Last Name</span>,
+    footer: (info) => info.column.id,
+  }),
+  columnHelper.accessor('age', {
+    header: () => 'Age',
+    cell: (info) => info.renderValue(),
+    footer: (info) => info.column.id,
+  }),
+  columnHelper.accessor('visits', {
+    header: () => <span>Visits</span>,
+    footer: (info) => info.column.id,
+  }),
+  columnHelper.accessor('progress', {
+    header: 'Profile Progress',
+    footer: (info) => info.column.id,
+  }),
+];
+
+export const Default: StoryObj<Args> = {
+  args: {},
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [data] = React.useState(() => [...defaultData]);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const table = useReactTable({
+      data,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+    });
+
+    const PersonDataTable = (args: DataTableProps<Person>) => {
+      // @ts-expect-error TODO-AH: what is the type issue here
+      return <DataTable {...args} />;
+    };
+
+    return <PersonDataTable {...args} table={table} />;
+  },
+};
+
+export const TableStyleBorder: StoryObj<Args> = {
+  args: {
+    tableStyle: 'border',
+  },
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [data] = React.useState(() => [...defaultData]);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const table = useReactTable({
+      data,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+    });
+
+    const PersonDataTable = (args: DataTableProps<Person>) => {
+      // @ts-expect-error TODO-AH: what is the type issue here
+      return <DataTable {...args} />;
+    };
+
+    return <PersonDataTable {...args} table={table} />;
+  },
+};
+
+export const TableSizeSm: StoryObj<Args> = {
+  args: {
+    tableStyle: 'border',
+    size: 'sm',
+  },
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [data] = React.useState(() => [...defaultData]);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const table = useReactTable({
+      data,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+    });
+
+    const PersonDataTable = (args: DataTableProps<Person>) => {
+      // @ts-expect-error TODO-AH: what is the type issue here
+      return <DataTable {...args} />;
+    };
+
+    return <PersonDataTable {...args} table={table} />;
+  },
+};
+
+export const RowStyleStriped: StoryObj<Args> = {
+  args: {
+    tableStyle: 'border',
+    rowStyle: 'striped',
+  },
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [data] = React.useState(() => [...defaultData]);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const table = useReactTable({
+      data,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+    });
+
+    const PersonDataTable = (args: DataTableProps<Person>) => {
+      // @ts-expect-error TODO-AH: what is the type issue here
+      return <DataTable {...args} />;
+    };
+
+    return <PersonDataTable {...args} table={table} />;
+  },
+};
+
+export const DefaultWithTable: StoryObj<Args> = {
   args: {
     children: (
       <table>
@@ -36,22 +208,19 @@ export default {
       </table>
     ),
   },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof DataTable>;
-
-export const Default: StoryObj<Args> = {
-  args: {},
 };
 
 export const WithBasicCaption: StoryObj<Args> = {
   args: {
+    ...DefaultWithTable.args,
     caption: 'Fruits of the world',
   },
 };
 
 export const WithFullCaption: StoryObj<Args> = {
+  ...DefaultWithTable,
   args: {
+    ...DefaultWithTable.args,
     caption: 'Fruits of the world',
     subcaption: "Aren't they all so delicious?",
   },
@@ -59,6 +228,7 @@ export const WithFullCaption: StoryObj<Args> = {
 
 export const WithSearch: StoryObj<Args> = {
   args: {
+    ...DefaultWithTable.args,
     caption: 'Fruits of the world',
     subcaption: "Aren't they all so delicious?",
     onSearchChange: () => {},
@@ -67,6 +237,7 @@ export const WithSearch: StoryObj<Args> = {
 
 export const WithOnlyActions: StoryObj<Args> = {
   args: {
+    ...DefaultWithTable.args,
     actions: (
       <Button
         aria-label="Add a row"
@@ -81,6 +252,7 @@ export const WithOnlyActions: StoryObj<Args> = {
 
 export const WithSearchAndActions: StoryObj<Args> = {
   args: {
+    ...DefaultWithTable.args,
     caption: 'Fruits of the world',
     subcaption: "Aren't they all so delicious?",
     onSearchChange: () => {},
@@ -98,6 +270,7 @@ export const WithSearchAndActions: StoryObj<Args> = {
 
 export const WithSearchAndCustomActions: StoryObj<Args> = {
   args: {
+    ...DefaultWithTable.args,
     caption: 'Fruits of the world',
     subcaption: "Aren't they all so delicious?",
     onSearchChange: () => {},
@@ -132,80 +305,7 @@ export const WithSearchAndCustomActions: StoryObj<Args> = {
 
 export const WithLongCaption: StoryObj<Args> = {
   args: {
-    caption:
-      'This is a really long title that really should not be this long and it just keeps going and going and going',
-    subcaption: 'Seriously, who let this happen?',
-    onSearchChange: () => {},
-    actions: (
-      <Button
-        aria-label="Add a row"
-        icon="add-encircled"
-        iconLayout="icon-only"
-        isDisabled
-        rank="secondary"
-      />
-    ),
-  },
-};
-
-// TODO: pick a table library based on the integration examples below
-
-export const TableA: StoryObj<Args> = {
-  args: {
-    caption:
-      'This is a really long title that really should not be this long and it just keeps going and going and going',
-    subcaption: 'Seriously, who let this happen?',
-    onSearchChange: () => {},
-    actions: (
-      <Button
-        aria-label="Add a row"
-        icon="add-encircled"
-        iconLayout="icon-only"
-        isDisabled
-        rank="secondary"
-      />
-    ),
-  },
-};
-
-export const TableB: StoryObj<Args> = {
-  args: {
-    caption:
-      'This is a really long title that really should not be this long and it just keeps going and going and going',
-    subcaption: 'Seriously, who let this happen?',
-    onSearchChange: () => {},
-    actions: (
-      <Button
-        aria-label="Add a row"
-        icon="add-encircled"
-        iconLayout="icon-only"
-        isDisabled
-        rank="secondary"
-      />
-    ),
-  },
-};
-
-export const TableC: StoryObj<Args> = {
-  args: {
-    caption:
-      'This is a really long title that really should not be this long and it just keeps going and going and going',
-    subcaption: 'Seriously, who let this happen?',
-    onSearchChange: () => {},
-    actions: (
-      <Button
-        aria-label="Add a row"
-        icon="add-encircled"
-        iconLayout="icon-only"
-        isDisabled
-        rank="secondary"
-      />
-    ),
-  },
-};
-
-export const TableD: StoryObj<Args> = {
-  args: {
+    ...DefaultWithTable.args,
     caption:
       'This is a really long title that really should not be this long and it just keeps going and going and going',
     subcaption: 'Seriously, who let this happen?',
diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index b025aad19..3d9558b37 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -1,7 +1,8 @@
+import { flexRender, type Table } from '@tanstack/react-table';
 import clsx from 'clsx';
 import React from 'react';
 
-import type { Status } from '../../util/variant-types';
+import type { Size, Status } from '../../util/variant-types';
 
 import ButtonGroup from '../ButtonGroup';
 import type { IconName } from '../Icon/Icon';
@@ -9,20 +10,24 @@ import InputField from '../InputField';
 
 import styles from './DataTable.module.css';
 
-export type DataTableProps = {
+export type DataTableProps<T = unknown> = {
   // Component API
   /**
    * Collection of buttons/menus to control the table contents
    */
   actions?: React.ReactNode;
   /**
-   * TODO: remove once table implementation is chosen
+   * Table content (used when basic table abstractions don't meet the needs. SEE helpers)
    */
   children?: React.ReactNode;
   /**
    * CSS class names that can be appended to the component.
    */
   className?: string;
+  /**
+   * Data table controller for rendering the contents of the table
+   */
+  table?: Table<T>;
   /**
    * Method to call when content is entered into the search field. Also causes the field
    * to appear.
@@ -35,10 +40,22 @@ export type DataTableProps = {
    * the accessible caption within the table.
    */
   caption?: string;
+  /**
+   * Controls whether the table allows the selection of its rows.
+   */
+  isSelectable?: boolean;
+  /**
+   * Controls whether the rows allow for a status color/icon treatment.
+   */
+  isStatusEligible?: boolean;
   /**
    * Controls the treatment of alternating rows in the table.
    */
   rowStyle?: 'striped' | 'lined';
+  /**
+   * Size of the padding for the table
+   */
+  size: Extract<Size, 'sm' | 'md'>;
   /**
    * Sub-caption text to use for the table. This text should be used with `caption` and is not
    * meant to be standalone.
@@ -48,14 +65,6 @@ export type DataTableProps = {
    * Controls the treatment of the table container.
    */
   tableStyle?: 'basic' | 'border';
-  /**
-   * Controls whether the table allows the selection of its rows.
-   */
-  isSelectable?: boolean;
-  /**
-   * Controls whether the rows allow for a status color/icon treatment.
-   */
-  isStatusEligible?: boolean;
 };
 
 // TODO: DataTableColumnProps
@@ -109,11 +118,22 @@ export const DataTable = ({
   // Add other deferenced props to use
   caption,
   onSearchChange,
+  rowStyle = 'lined', // TODO-AH: is this the default?
+  size = 'md',
   subcaption,
+  table,
+  tableStyle = 'basic',
   ...other
 }: DataTableProps) => {
   const componentClassName = clsx(styles['data-table'], className);
 
+  const tableClassName = clsx(
+    styles['data-table__table'],
+    tableStyle && styles[`data-table--tableStyle-${tableStyle}`],
+    rowStyle && styles[`data-table--rowStyle-${rowStyle}`],
+    size && styles[`data-table--size-${size}`],
+  );
+
   /**
    * to handle (sub-)caption, render outside the table, but put the combined text in
    * <caption>, and set to hidden in css. that way you can control the layout of the combined
@@ -134,6 +154,7 @@ export const DataTable = ({
                 </div>
               )}
               {subcaption && (
+                // TODO: Warn when only using subcaption
                 <div
                   aria-hidden="true"
                   className={styles['data-table__subcaption']}
@@ -156,22 +177,60 @@ export const DataTable = ({
           )}
         </div>
       )}
-      {/* // TODO: replace with param.s that implement table semantics */}
-      {children}
+      {/*
+        Do the below when `children` is undefined, and warn when both are specified
+
+        For table header
+        - when generating thead, use isSortable to determine contents
+
+        For table body for each row:
+        - when isSelectable, generate status column and add checkboxes
+        - when isStatusEligable, generate status column and add checkboxes
+          Following: https://tanstack.com/table/latest/docs/framework/react/examples/basic
+       */}
+      {children ?? (
+        <table className={tableClassName}>
+          {(caption || subcaption) && (
+            <caption className={styles['data-table__aria-caption']}>
+              {`${caption}${subcaption ? ': ' + subcaption : ''}`}
+            </caption>
+          )}
+          <thead className={styles['data-table__header-row']}>
+            {table?.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <th
+                    className={styles['data-table__header-cell']}
+                    key={header.id}
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {table?.getRowModel().rows.map((row) => (
+              <tr className={styles['data-table__row']} key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <td className={styles['data-table__cell']} key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
     </div>
   );
 };
 
-// const tableClassName = clsx(styles['data-table__table']);
-/* 
-  TODO-AH: restore this once table implementation is chosen
-    {(caption || subcaption) && (
-      <caption className={styles['data-table__aria-caption']}>
-        {`${caption}${subcaption ? ': ' + subcaption : ''}`}
-      </caption>
-    )}
-*/
-
 const DataTableSearch = () => {
   return (
     <InputField
diff --git a/src/components/DataTable/__snapshots__/DataTable.test.ts.snap b/src/components/DataTable/__snapshots__/DataTable.test.ts.snap
index cd5471126..cec23f85f 100644
--- a/src/components/DataTable/__snapshots__/DataTable.test.ts.snap
+++ b/src/components/DataTable/__snapshots__/DataTable.test.ts.snap
@@ -1,6 +1,149 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<DataTable /> Default story renders snapshot 1`] = `
+<div
+  class="data-table"
+>
+  <table
+    class="data-table__table data-table--tableStyle-basic data-table--rowStyle-lined data-table--size-md"
+  >
+    <thead
+      class="data-table__header-row"
+    >
+      <tr>
+        <th
+          class="data-table__header-cell"
+        >
+          <span>
+            First Name
+          </span>
+        </th>
+        <th
+          class="data-table__header-cell"
+        >
+          <span>
+            Last Name
+          </span>
+        </th>
+        <th
+          class="data-table__header-cell"
+        >
+          Age
+        </th>
+        <th
+          class="data-table__header-cell"
+        >
+          <span>
+            Visits
+          </span>
+        </th>
+        <th
+          class="data-table__header-cell"
+        >
+          Profile Progress
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        class="data-table__row"
+      >
+        <td
+          class="data-table__cell"
+        >
+          Tanner
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          <i>
+            Lindsey
+          </i>
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          24
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          100
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          50
+        </td>
+      </tr>
+      <tr
+        class="data-table__row"
+      >
+        <td
+          class="data-table__cell"
+        >
+          Tandy
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          <i>
+            Miller
+          </i>
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          40
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          40
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          80
+        </td>
+      </tr>
+      <tr
+        class="data-table__row"
+      >
+        <td
+          class="data-table__cell"
+        >
+          Joe
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          <i>
+            Dirte
+          </i>
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          45
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          20
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          10
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
+
+exports[`<DataTable /> DefaultWithTable story renders snapshot 1`] = `
 <div
   class="data-table"
 >
@@ -18,111 +161,142 @@ exports[`<DataTable /> Default story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<DataTable /> TableA story renders snapshot 1`] = `
+exports[`<DataTable /> RowStyleStriped story renders snapshot 1`] = `
 <div
   class="data-table"
 >
-  <div
-    class="data-table__caption-container"
+  <table
+    class="data-table__table data-table--tableStyle-border data-table--rowStyle-striped data-table--size-md"
   >
-    <div
-      class="data-table__caption-text"
+    <thead
+      class="data-table__header-row"
     >
-      <div
-        aria-hidden="true"
-        class="data-table__caption"
+      <tr>
+        <th
+          class="data-table__header-cell"
+        >
+          <span>
+            First Name
+          </span>
+        </th>
+        <th
+          class="data-table__header-cell"
+        >
+          <span>
+            Last Name
+          </span>
+        </th>
+        <th
+          class="data-table__header-cell"
+        >
+          Age
+        </th>
+        <th
+          class="data-table__header-cell"
+        >
+          <span>
+            Visits
+          </span>
+        </th>
+        <th
+          class="data-table__header-cell"
+        >
+          Profile Progress
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        class="data-table__row"
       >
-        This is a really long title that really should not be this long and it just keeps going and going and going
-      </div>
-      <div
-        aria-hidden="true"
-        class="data-table__subcaption"
+        <td
+          class="data-table__cell"
+        >
+          Tanner
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          <i>
+            Lindsey
+          </i>
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          24
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          100
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          50
+        </td>
+      </tr>
+      <tr
+        class="data-table__row"
       >
-        Seriously, who let this happen?
-      </div>
-    </div>
-    <div
-      class="data-table__search"
-    >
-      <div>
-        <div
-          class="input-field__body"
+        <td
+          class="data-table__cell"
         >
-          <input
-            aria-invalid="false"
-            aria-label="search"
-            class="input input-field__input--leading-icon"
-            disabled=""
-            id=":ra:"
-            placeholder="Search..."
-            type="search"
-          />
-          <div
-            class="input-field__leading-icon"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon"
-              fill="currentColor"
-              height="1.5rem"
-              style="--icon-size: 1.5rem;"
-              viewBox="0 0 24 24"
-              width="1.5rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="data-table__actions"
-    >
-      <div
-        class="button-group button-group--horizontal"
+          Tandy
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          <i>
+            Miller
+          </i>
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          40
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          40
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          80
+        </td>
+      </tr>
+      <tr
+        class="data-table__row"
       >
-        <span
-          class="button__disabled"
+        <td
+          class="data-table__cell"
         >
-          <button
-            aria-label="Add a row"
-            class="button button--layout-icon-only button--disabled button--secondary button--lg button--variant-default"
-            disabled=""
-            type="button"
-          >
-            <span
-              class="button__text"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 7c-.55 0-1 .45-1 1v3H8c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1h-3V8c0-.55-.45-1-1-1zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-                />
-              </svg>
-            </span>
-          </button>
-        </span>
-      </div>
-    </div>
-  </div>
-  <table>
-    <tbody
-      class="border-2 border-utility-default-lowEmphasis-hover"
-    >
-      <tr>
-        <td>
-          TODO: Table rows/cells Here
+          Joe
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          <i>
+            Dirte
+          </i>
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          45
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          20
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          10
         </td>
       </tr>
     </tbody>
@@ -130,223 +304,142 @@ exports[`<DataTable /> TableA story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<DataTable /> TableB story renders snapshot 1`] = `
+exports[`<DataTable /> TableSizeSm story renders snapshot 1`] = `
 <div
   class="data-table"
 >
-  <div
-    class="data-table__caption-container"
+  <table
+    class="data-table__table data-table--tableStyle-border data-table--rowStyle-lined data-table--size-sm"
   >
-    <div
-      class="data-table__caption-text"
+    <thead
+      class="data-table__header-row"
     >
-      <div
-        aria-hidden="true"
-        class="data-table__caption"
-      >
-        This is a really long title that really should not be this long and it just keeps going and going and going
-      </div>
-      <div
-        aria-hidden="true"
-        class="data-table__subcaption"
-      >
-        Seriously, who let this happen?
-      </div>
-    </div>
-    <div
-      class="data-table__search"
-    >
-      <div>
-        <div
-          class="input-field__body"
+      <tr>
+        <th
+          class="data-table__header-cell"
         >
-          <input
-            aria-invalid="false"
-            aria-label="search"
-            class="input input-field__input--leading-icon"
-            disabled=""
-            id=":rc:"
-            placeholder="Search..."
-            type="search"
-          />
-          <div
-            class="input-field__leading-icon"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon"
-              fill="currentColor"
-              height="1.5rem"
-              style="--icon-size: 1.5rem;"
-              viewBox="0 0 24 24"
-              width="1.5rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="data-table__actions"
-    >
-      <div
-        class="button-group button-group--horizontal"
+          <span>
+            First Name
+          </span>
+        </th>
+        <th
+          class="data-table__header-cell"
+        >
+          <span>
+            Last Name
+          </span>
+        </th>
+        <th
+          class="data-table__header-cell"
+        >
+          Age
+        </th>
+        <th
+          class="data-table__header-cell"
+        >
+          <span>
+            Visits
+          </span>
+        </th>
+        <th
+          class="data-table__header-cell"
+        >
+          Profile Progress
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        class="data-table__row"
       >
-        <span
-          class="button__disabled"
+        <td
+          class="data-table__cell"
         >
-          <button
-            aria-label="Add a row"
-            class="button button--layout-icon-only button--disabled button--secondary button--lg button--variant-default"
-            disabled=""
-            type="button"
-          >
-            <span
-              class="button__text"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 7c-.55 0-1 .45-1 1v3H8c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1h-3V8c0-.55-.45-1-1-1zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-                />
-              </svg>
-            </span>
-          </button>
-        </span>
-      </div>
-    </div>
-  </div>
-  <table>
-    <tbody
-      class="border-2 border-utility-default-lowEmphasis-hover"
-    >
-      <tr>
-        <td>
-          TODO: Table rows/cells Here
+          Tanner
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          <i>
+            Lindsey
+          </i>
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          24
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          100
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          50
         </td>
       </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
-exports[`<DataTable /> TableC story renders snapshot 1`] = `
-<div
-  class="data-table"
->
-  <div
-    class="data-table__caption-container"
-  >
-    <div
-      class="data-table__caption-text"
-    >
-      <div
-        aria-hidden="true"
-        class="data-table__caption"
-      >
-        This is a really long title that really should not be this long and it just keeps going and going and going
-      </div>
-      <div
-        aria-hidden="true"
-        class="data-table__subcaption"
+      <tr
+        class="data-table__row"
       >
-        Seriously, who let this happen?
-      </div>
-    </div>
-    <div
-      class="data-table__search"
-    >
-      <div>
-        <div
-          class="input-field__body"
+        <td
+          class="data-table__cell"
         >
-          <input
-            aria-invalid="false"
-            aria-label="search"
-            class="input input-field__input--leading-icon"
-            disabled=""
-            id=":re:"
-            placeholder="Search..."
-            type="search"
-          />
-          <div
-            class="input-field__leading-icon"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon"
-              fill="currentColor"
-              height="1.5rem"
-              style="--icon-size: 1.5rem;"
-              viewBox="0 0 24 24"
-              width="1.5rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="data-table__actions"
-    >
-      <div
-        class="button-group button-group--horizontal"
+          Tandy
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          <i>
+            Miller
+          </i>
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          40
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          40
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          80
+        </td>
+      </tr>
+      <tr
+        class="data-table__row"
       >
-        <span
-          class="button__disabled"
+        <td
+          class="data-table__cell"
         >
-          <button
-            aria-label="Add a row"
-            class="button button--layout-icon-only button--disabled button--secondary button--lg button--variant-default"
-            disabled=""
-            type="button"
-          >
-            <span
-              class="button__text"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 7c-.55 0-1 .45-1 1v3H8c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1h-3V8c0-.55-.45-1-1-1zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-                />
-              </svg>
-            </span>
-          </button>
-        </span>
-      </div>
-    </div>
-  </div>
-  <table>
-    <tbody
-      class="border-2 border-utility-default-lowEmphasis-hover"
-    >
-      <tr>
-        <td>
-          TODO: Table rows/cells Here
+          Joe
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          <i>
+            Dirte
+          </i>
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          45
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          20
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          10
         </td>
       </tr>
     </tbody>
@@ -354,111 +447,142 @@ exports[`<DataTable /> TableC story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<DataTable /> TableD story renders snapshot 1`] = `
+exports[`<DataTable /> TableStyleBorder story renders snapshot 1`] = `
 <div
   class="data-table"
 >
-  <div
-    class="data-table__caption-container"
+  <table
+    class="data-table__table data-table--tableStyle-border data-table--rowStyle-lined data-table--size-md"
   >
-    <div
-      class="data-table__caption-text"
+    <thead
+      class="data-table__header-row"
     >
-      <div
-        aria-hidden="true"
-        class="data-table__caption"
+      <tr>
+        <th
+          class="data-table__header-cell"
+        >
+          <span>
+            First Name
+          </span>
+        </th>
+        <th
+          class="data-table__header-cell"
+        >
+          <span>
+            Last Name
+          </span>
+        </th>
+        <th
+          class="data-table__header-cell"
+        >
+          Age
+        </th>
+        <th
+          class="data-table__header-cell"
+        >
+          <span>
+            Visits
+          </span>
+        </th>
+        <th
+          class="data-table__header-cell"
+        >
+          Profile Progress
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        class="data-table__row"
       >
-        This is a really long title that really should not be this long and it just keeps going and going and going
-      </div>
-      <div
-        aria-hidden="true"
-        class="data-table__subcaption"
+        <td
+          class="data-table__cell"
+        >
+          Tanner
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          <i>
+            Lindsey
+          </i>
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          24
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          100
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          50
+        </td>
+      </tr>
+      <tr
+        class="data-table__row"
       >
-        Seriously, who let this happen?
-      </div>
-    </div>
-    <div
-      class="data-table__search"
-    >
-      <div>
-        <div
-          class="input-field__body"
+        <td
+          class="data-table__cell"
         >
-          <input
-            aria-invalid="false"
-            aria-label="search"
-            class="input input-field__input--leading-icon"
-            disabled=""
-            id=":rg:"
-            placeholder="Search..."
-            type="search"
-          />
-          <div
-            class="input-field__leading-icon"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon"
-              fill="currentColor"
-              height="1.5rem"
-              style="--icon-size: 1.5rem;"
-              viewBox="0 0 24 24"
-              width="1.5rem"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="data-table__actions"
-    >
-      <div
-        class="button-group button-group--horizontal"
+          Tandy
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          <i>
+            Miller
+          </i>
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          40
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          40
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          80
+        </td>
+      </tr>
+      <tr
+        class="data-table__row"
       >
-        <span
-          class="button__disabled"
+        <td
+          class="data-table__cell"
         >
-          <button
-            aria-label="Add a row"
-            class="button button--layout-icon-only button--disabled button--secondary button--lg button--variant-default"
-            disabled=""
-            type="button"
-          >
-            <span
-              class="button__text"
-            >
-              <svg
-                aria-hidden="true"
-                class="icon"
-                fill="currentColor"
-                height="1.5rem"
-                style="--icon-size: 1.5rem;"
-                viewBox="0 0 24 24"
-                width="1.5rem"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 7c-.55 0-1 .45-1 1v3H8c-.55 0-1 .45-1 1s.45 1 1 1h3v3c0 .55.45 1 1 1s1-.45 1-1v-3h3c.55 0 1-.45 1-1s-.45-1-1-1h-3V8c0-.55-.45-1-1-1zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
-                />
-              </svg>
-            </span>
-          </button>
-        </span>
-      </div>
-    </div>
-  </div>
-  <table>
-    <tbody
-      class="border-2 border-utility-default-lowEmphasis-hover"
-    >
-      <tr>
-        <td>
-          TODO: Table rows/cells Here
+          Joe
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          <i>
+            Dirte
+          </i>
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          45
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          20
+        </td>
+        <td
+          class="data-table__cell"
+        >
+          10
         </td>
       </tr>
     </tbody>
diff --git a/yarn.lock b/yarn.lock
index caea688eb..05b5dac16 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2762,6 +2762,7 @@ __metadata:
     "@storybook/test": "npm:^8.2.9"
     "@storybook/testing-library": "npm:^0.2.2"
     "@storybook/theming": "npm:^8.2.9"
+    "@tanstack/react-table": "npm:^8.20.5"
     "@testing-library/jest-dom": "npm:^6.5.0"
     "@testing-library/react": "npm:^16.0.1"
     "@testing-library/user-event": "npm:^14.5.2"
@@ -5879,6 +5880,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/react-table@npm:^8.20.5":
+  version: 8.20.5
+  resolution: "@tanstack/react-table@npm:8.20.5"
+  dependencies:
+    "@tanstack/table-core": "npm:8.20.5"
+  peerDependencies:
+    react: ">=16.8"
+    react-dom: ">=16.8"
+  checksum: 10/df67094795a0b7e4b34f73abe346443c2e806c572fea31b58759aa8ec5274f613e5e6941090eb16f861bda10d3088731bc6e7f15e5f90326db273bc55b9141ce
+  languageName: node
+  linkType: hard
+
 "@tanstack/react-virtual@npm:^3.0.0-beta.60":
   version: 3.0.1
   resolution: "@tanstack/react-virtual@npm:3.0.1"
@@ -5891,6 +5904,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/table-core@npm:8.20.5":
+  version: 8.20.5
+  resolution: "@tanstack/table-core@npm:8.20.5"
+  checksum: 10/5408237920d5796951e925278edbbe76f71006627a4e3da248a810970256f75d973538fe7ae75a32155d4a25a95abc4fffaea337b5120f7940d7e664dc9da87f
+  languageName: node
+  linkType: hard
+
 "@tanstack/virtual-core@npm:3.0.0":
   version: 3.0.0
   resolution: "@tanstack/virtual-core@npm:3.0.0"