add the second generic type of the Table for the column functionality

kafbat · Feb 18, 2024 · e2ccaa7 · e2ccaa7
1 parent 43923ac
commit e2ccaa7
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/frontend/src/components/common/NewTable/ExpanderCell.tsx b/frontend/src/components/common/NewTable/ExpanderCell.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import * as S from './Table.styled';
 
-function ExpanderCell<T>({ row }: CellContext<T, unknown>) {
+function ExpanderCell<T, V = unknown>({ row }: CellContext<T, V>) {
   return (
     <S.ExpaderButton
       width="16"

diff --git a/frontend/src/components/common/NewTable/SelectRowCell.tsx b/frontend/src/components/common/NewTable/SelectRowCell.tsx
@@ -2,7 +2,7 @@ import { CellContext } from '@tanstack/react-table';
 import React from 'react';
 import IndeterminateCheckbox from 'components/common/IndeterminateCheckbox/IndeterminateCheckbox';
 
-function SelectRowCell<T>({ row }: CellContext<T, unknown>) {
+function SelectRowCell<T, V = unknown>({ row }: CellContext<T, V>) {
   return (
     <IndeterminateCheckbox
       checked={row.getIsSelected()}

diff --git a/frontend/src/components/common/NewTable/SelectRowHeader.tsx b/frontend/src/components/common/NewTable/SelectRowHeader.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import IndeterminateCheckbox from 'components/common/IndeterminateCheckbox/IndeterminateCheckbox';
 import { HeaderContext } from '@tanstack/react-table';
 
-function SelectRowHeader<T>({ table }: HeaderContext<T, unknown>) {
+function SelectRowHeader<T, V = unknown>({ table }: HeaderContext<T, V>) {
   return (
     <IndeterminateCheckbox
       checked={table.getIsAllRowsSelected()}

diff --git a/frontend/src/components/common/NewTable/Table.tsx b/frontend/src/components/common/NewTable/Table.tsx
@@ -26,10 +26,10 @@ import ExpanderCell from './ExpanderCell';
 import SelectRowCell from './SelectRowCell';
 import SelectRowHeader from './SelectRowHeader';
 
-export interface TableProps<TData> {
+export interface TableProps<TData, TValue> {
   data: TData[];
   pageCount?: number;
-  columns: ColumnDef<TData>[];
+  columns: ColumnDef<TData, TValue>[];
 
   // Server-side processing: sorting, pagination
   serverSideProcessing?: boolean;
@@ -118,7 +118,7 @@ const getSortingFromSearchParams = (searchParams: URLSearchParams) => {
  *    - use URLSearchParams to get the pagination and sorting state from the url for your server side processing.
  */
 
-function Table<TData>({
+function Table<TData, TValue = unknown>({
   data,
   pageCount,
   columns,
@@ -134,7 +134,7 @@ function Table<TData>({
   onRowHover,
   onMouseLeave,
   setRowId,
-}: TableProps<TData>) {
+}: TableProps<TData, TValue>) {
   const [searchParams, setSearchParams] = useSearchParams();
   const location = useLocation();
   const [rowSelection, setRowSelection] = React.useState({});