@yusufalperendumlu/component-library 0.0.17 → 0.0.19

package/dist/index.d.ts

@@ -65,20 +65,21 @@ type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
 
 declare const Input: React$1.FC<InputProps>;
 
-interface TableColumn<T> {
-    key: keyof T;
-    label: string;
-    sortable?: boolean;
-    render?: (value: any, row: T) => React.ReactNode;
-}
 interface TableProps<T> {
-    columns: TableColumn<T>[];
+    columns: {
+        key: keyof T;
+        label: string;
+        sortable: boolean;
+        render?: (value: any, row: T) => React.ReactNode;
+    }[];
     data: T[];
     onRowClick?: (row: T) => void;
     className?: string;
+    selectedRowId?: string | number | null;
+    rowIdKey?: keyof T;
 }
 
-declare function Table<T extends Record<string, any>>({ columns, data, onRowClick, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, any>>({ columns, data, onRowClick, className, selectedRowId, rowIdKey, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 type ToastProps = {
     title: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yusufalperendumlu/component-library",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",

package/src/components/Table/Table.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { FaArrowDown, FaArrowUp } from 'react-icons/fa';
 
 import { TableProps } from './Table.types';
@@ -9,12 +9,14 @@ function Table<T extends Record<string, any>>({
   data,
   onRowClick,
   className,
+  selectedRowId,
+  rowIdKey = 'id',
 }: TableProps<T>) {
   const [sortKey, setSortKey] = useState<keyof T | null>(null);
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
   const [selectedRowIndex, setSelectedRowIndex] = useState<number | null>(null);
 
-  const sortedData = React.useMemo(() => {
+  const sortedData = useMemo(() => {
     if (!sortKey) return data;
 
     const sorted = [...data].sort((a, b) => {
@@ -40,7 +42,7 @@ function Table<T extends Record<string, any>>({
     <div className={clsx('border-none h-full flex flex-col', className)}>
       <div className='h-full overflow-y-auto custom-scroll bg-[#171215]'>
         <table className='table-fixed min-w-full text-left text-sm text-zinc-100'>
-          <thead className='border-b-2 border-[#5876EE] text-[#5876EE] sticky top-0 z-10'>
+          <thead className='bg-[#171215] border-b-2 border-[#5876EE] text-[#5876EE] sticky top-0 z-10'>
             <tr>
               {columns.map(({ key, label, sortable }) => (
                 <th
@@ -66,32 +68,39 @@ function Table<T extends Record<string, any>>({
             </tr>
           </thead>
           <tbody>
-            {sortedData.map((row, idx) => (
-              <tr
-                key={idx}
-                onClick={() => {
-                  setSelectedRowIndex(idx);
-                  onRowClick?.(row);
-                }}
-                className={clsx(
-                  selectedRowIndex === idx
-                    ? 'bg-[#BDC311]'
-                    : idx % 2 === 0
-                      ? 'bg-[#1D1B1D]'
-                      : 'bg-[#424242]',
-                  'cursor-pointer'
-                )}
-              >
-                {columns.map(({ key, render }) => (
-                  <td
-                    key={key as string}
-                    className='whitespace-nowrap px-6 py-4'
-                  >
-                    {render ? render(row[key], row) : row[key]}
-                  </td>
-                ))}
-              </tr>
-            ))}
+            {sortedData.map((row, idx) => {
+              const isSelected =
+                selectedRowId !== undefined &&
+                selectedRowId !== null &&
+                row[rowIdKey] === selectedRowId;
+
+              return (
+                <tr
+                  key={idx}
+                  onClick={() => {
+                    setSelectedRowIndex(idx);
+                    onRowClick?.(row);
+                  }}
+                  className={clsx(
+                    isSelected
+                      ? 'bg-[#BDC311]'
+                      : idx % 2 === 0
+                        ? 'bg-[#1D1B1D]'
+                        : 'bg-[#424242]',
+                    'cursor-pointer'
+                  )}
+                >
+                  {columns.map(({ key, render }) => (
+                    <td
+                      key={key as string}
+                      className='whitespace-nowrap px-6 py-4'
+                    >
+                      {render ? render(row[key], row) : row[key]}
+                    </td>
+                  ))}
+                </tr>
+              );
+            })}
           </tbody>
         </table>
       </div>

package/src/components/Table/Table.types.ts

@@ -6,8 +6,15 @@ export interface TableColumn<T> {
 }
 
 export interface TableProps<T> {
-  columns: TableColumn<T>[];
+  columns: {
+    key: keyof T;
+    label: string;
+    sortable: boolean;
+    render?: (value: any, row: T) => React.ReactNode;
+  }[];
   data: T[];
   onRowClick?: (row: T) => void;
   className?: string;
+  selectedRowId?: string | number | null;
+  rowIdKey?: keyof T; 
 }