w-design-system 0.0.92 → 0.0.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-design-system",
-  "version": "0.0.92",
+  "version": "0.0.93",
   "main": "dist/w-design-system.umd.js",
   "module": "dist/w-design-system.es.js",
   "types": "dist/index.d.ts",

package/src/components/Table/index.tsx

@@ -118,7 +118,12 @@ export const Table = <T extends { id: number }>({
   onRowClick,
 }: TableProps<T>) => {
   const [expandedRows, setExpandedRows] = useState<number[]>([])
+  const [selectedRowId, setSelectedRowId] = useState<number | null>(null)
 
+  const handleRowClick = (row: T) => {
+    setSelectedRowId(row.id)
+    onRowClick?.(row) // dispara a função recebida por props
+  }
   const handleExpandClick = (id: number) => {
     setExpandedRows(prev => (prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]))
   }
@@ -159,7 +164,11 @@ export const Table = <T extends { id: number }>({
                   <Tr
                     striped={striped}
                     clickable={rowClickable && !!onRowClick}
-                    onClick={() => rowClickable && onRowClick && onRowClick(row)}
+                    onClick={() => rowClickable && onRowClick && handleRowClick(row)}
+                    style={{
+                      border: `1px solid ${selectedRowId === row.id ? theme.colors.cyan30 : 'transparent'}`,
+                      background: selectedRowId === row.id ? theme.colors.cyan10 : 'transparent',
+                    }}
                   >
                     {columns.map((col, colIndex) => (
                       <Td key={colIndex} width={col.width} align={col.align || 'left'}>

package/src/components/Table/stories.tsx

@@ -206,7 +206,16 @@ export const LoadingState: Story = {
   render: () => (
     <CardStories title={'Tabela'} subTitle={'tabela-loading'}>
       <div style={{ width: '900px', height: '800px' }}>
-        <Table columns={columns} loading={true} height={'100%'} data={[]} />
+        <Table
+          columns={columns}
+          loading={true}
+          height={'100%'}
+          data={[]}
+          onRowClick={student => {
+            console.log('Linha selecionada:', student)
+            // aqui você pode abrir um modal, preencher formulário, etc.
+          }}
+        />
       </div>
     </CardStories>
   ),