Resolve tanstack dependency for DataTable (#1018)

lib/platform-bible-react/dist/index.d.ts

@@ -6,7 +6,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { ColumnDef, Row, Table as tsTable } from '@tanstack/react-table';
+import { ColumnDef as TSColumnDef, Row as TSRow, SortDirection as TSSortDirection, Table as TSTable } from '@tanstack/react-table';
 import { VariantProps } from 'class-variance-authority';
 import React$1 from 'react';
 import { ChangeEvent, ChangeEventHandler, FocusEventHandler, MouseEvent as MouseEvent$1, MouseEventHandler, MutableRefObject, PropsWithChildren, ReactNode, SyntheticEvent } from 'react';
@@ -154,13 +154,17 @@ export type BookChapterControlProps = {
 	handleSubmit: (scrRef: ScriptureReference) => void;
 };
 export declare function BookChapterControl({ scrRef, handleSubmit }: BookChapterControlProps): import("react/jsx-runtime").JSX.Element;
+export type ColumnDef<TData, TValue = unknown> = TSColumnDef<TData, TValue>;
+export type RowContents<TData> = TSRow<TData>;
+export type TableContents<TData> = TSTable<TData>;
+export type SortDirection = TSSortDirection;
 export interface DataTableProps<TData, TValue> {
 	columns: ColumnDef<TData, TValue>[];
 	data: TData[];
 	enablePagination?: boolean;
 	showPaginationControls?: boolean;
 	showColumnVisibilityControls?: boolean;
-	onRowClickHandler?: (row: Row<TData>, table: tsTable<TData>) => void;
+	onRowClickHandler?: (row: RowContents<TData>, table: TableContents<TData>) => void;
 }
 export declare function DataTable<TData, TValue>({ columns, data, enablePagination, showPaginationControls, showColumnVisibilityControls, onRowClickHandler, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export declare const buttonVariants: (props?: ({

lib/platform-bible-react/src/components/advanced-components/data-table/data-table.component.tsx

@@ -1,18 +1,19 @@
 import { useState } from 'react';
 
 import {
-  ColumnDef,
+  ColumnDef as TSColumnDef,
   ColumnFiltersState,
-  Row,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  Row as TSRow,
+  SortDirection as TSSortDirection,
+  SortingState,
+  Table as TSTable,
   useReactTable,
-  Table as tsTable,
+  VisibilityState,
 } from '@tanstack/react-table';
 
 import {
@@ -27,13 +28,18 @@ import { Button } from '@/components/shadcn-ui/button';
 import DataTablePagination from './data-table-pagination.component';
 import DataTableViewOptions from './data-table-column-toggle.component';
 
+export type ColumnDef<TData, TValue = unknown> = TSColumnDef<TData, TValue>;
+export type RowContents<TData> = TSRow<TData>;
+export type TableContents<TData> = TSTable<TData>;
+export type SortDirection = TSSortDirection;
+
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
   enablePagination?: boolean;
   showPaginationControls?: boolean;
   showColumnVisibilityControls?: boolean;
-  onRowClickHandler?: (row: Row<TData>, table: tsTable<TData>) => void;
+  onRowClickHandler?: (row: RowContents<TData>, table: TableContents<TData>) => void;
 }
 
 function DataTable<TData, TValue>({
@@ -71,7 +77,7 @@ function DataTable<TData, TValue>({
   return (
     <div>
       {showColumnVisibilityControls && <DataTableViewOptions table={table} />}
-      <div className="pr-twp">
+      <div className="pr-twp pr-font-sans">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (

lib/platform-bible-react/src/components/paratext-10-studio-components/inventory/inventory-data-table.component.tsx

@@ -7,10 +7,14 @@ import {
   CircleXIcon,
   CircleHelpIcon,
 } from 'lucide-react';
-import { ColumnDef, Row, SortDirection, Table } from '@tanstack/react-table';
 import { LanguageStrings } from 'platform-bible-utils';
 import { Button } from '@/components/shadcn-ui/button';
-import DataTable from '@/components/advanced-components/data-table/data-table.component';
+import DataTable, {
+  ColumnDef,
+  RowContents,
+  SortDirection,
+  TableContents,
+} from '@/components/advanced-components/data-table/data-table.component';
 
 export type Status = true | false | undefined;
 
@@ -160,7 +164,10 @@ function InventoryDataTable({
   const countLabel = localizedStrings['%webView_inventory_table_header_count%'];
   const statusLabel = localizedStrings['%webView_inventory_table_header_status%'];
 
-  const rowClickHandler = (row: Row<CharacterData>, table: Table<CharacterData>) => {
+  const rowClickHandler = (
+    row: RowContents<CharacterData>,
+    table: TableContents<CharacterData>,
+  ) => {
     table.toggleAllRowsSelected(false); // this is pretty hacky, and also prevents us from selecting multiple rows
     row.toggleSelected(undefined);
 

lib/platform-bible-react/src/index.ts

@@ -3,6 +3,12 @@ import './index.css';
 // Components and Types
 export { default as BookChapterControl } from './components/advanced-components/book-chapter-control/book-chapter-control.component';
 export { default as DataTable } from './components/advanced-components/data-table/data-table.component';
+export type {
+  ColumnDef,
+  RowContents,
+  SortDirection,
+  TableContents,
+} from './components/advanced-components/data-table/data-table.component';
 
 export { Button, type ButtonProps, buttonVariants } from './components/shadcn-ui/button';
 export { default as ChapterRangeSelector } from './components/chapter-range-selector.component';

lib/platform-bible-react/src/preview/components/data-sources/data-table-content.tsx

@@ -1,4 +1,7 @@
-import { ColumnDef, SortDirection } from '@tanstack/react-table';
+import {
+  ColumnDef,
+  SortDirection,
+} from '@/components/advanced-components/data-table/data-table.component';
 import { Button } from '../../..';
 
 type MyDataType = {