TableRow

 avatar
unknown
jsx
2 years ago
1.5 kB
5
Indexable
import {classNames} from "@/util";

interface TableRowProps {
    rowData: any;
    columnDefinition: any;
    customTableProps?: any;
    onRowClick?: (row: any) => void;
}


export default function TableRow({rowData, columnDefinition, customTableProps, onRowClick}: TableRowProps) {
    const isSelected = customTableProps.selectedRows.includes(rowData);
    return (
        <tr key={rowData.id} className="hover:bg-gray-50">
            {
                columnDefinition.map((colDef:any, i:number) => {
                    return  (<td key={colDef.key + '#' + i}
                                 className={classNames(
                            !colDef.notClickable ? "hover:cursor-pointer" : "","py-4 text-sm text-gray-900 relative",
                                     isSelected && 'bg-gray-50'
                                 )}
                                 { ...!colDef.notClickable && { onClick: () => { onRowClick && onRowClick({rowData}) } } }>

                        {
                            isSelected && colDef.key === 'row-selector' && (<div className="absolute inset-y-0 left-0 w-0.5 bg-blue-600" />)
                        }

                        { colDef.format ?
                            colDef.format({
                                rowData,
                                customTableProps
                            })
                            : rowData[colDef.key]
                        }
                    </td>)
                })
            }
        </tr>
    )
}




Editor is loading...