diff --git a/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css b/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css index b903f49e3..e816fc3e7 100644 --- a/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css +++ b/src/renderer/components/item-list/item-table-list/item-table-list-column.module.css @@ -33,6 +33,10 @@ padding: var(--theme-spacing-xs); } +.container.with-row-border { + border-bottom: 1px solid var(--theme-colors-border); +} + .header-container { background: none; } diff --git a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx index ab0bcc06b..22189930b 100644 --- a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx +++ b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx @@ -121,6 +121,8 @@ export const TableColumnTextContainer = ( [styles.compact]: props.size === 'compact', [styles.left]: props.columns[props.columnIndex].align === 'start', [styles.right]: props.columns[props.columnIndex].align === 'end', + [styles.withRowBorder]: + props.enableRowBorders && props.enableHeader && props.rowIndex > 0, })} onClick={(e) => props.handleExpand(e, props.data[props.rowIndex], props.itemType)} style={props.style} @@ -151,6 +153,8 @@ export const TableColumnContainer = ( [styles.compact]: props.size === 'compact', [styles.left]: props.columns[props.columnIndex].align === 'start', [styles.right]: props.columns[props.columnIndex].align === 'end', + [styles.withRowBorder]: + props.enableRowBorders && props.enableHeader && props.rowIndex > 0, })} onClick={(e) => props.handleExpand(e, props.data[props.rowIndex], props.itemType)} style={props.style} diff --git a/src/renderer/components/item-list/item-table-list/item-table-list.tsx b/src/renderer/components/item-list/item-table-list/item-table-list.tsx index 0d1afda7a..b4ea91724 100644 --- a/src/renderer/components/item-list/item-table-list/item-table-list.tsx +++ b/src/renderer/components/item-list/item-table-list/item-table-list.tsx @@ -29,6 +29,7 @@ export interface CellProps { columns: ItemTableListColumnConfig[]; data: unknown[]; enableHeader?: boolean; + enableRowBorders?: boolean; handleExpand: (e: MouseEvent, item: unknown, itemType: LibraryItem) => void; itemType: LibraryItem; size?: 'compact' | 'default'; @@ -47,6 +48,7 @@ interface ItemTableListProps { data: unknown[]; enableExpansion?: boolean; enableHeader?: boolean; + enableRowBorders?: boolean; enableSelection?: boolean; headerHeight?: number; initialTopMostItemIndex?: @@ -92,6 +94,7 @@ export const ItemTableList = ({ columns, data, enableHeader = true, + enableRowBorders = false, headerHeight = 40, initialTopMostItemIndex, itemType, @@ -544,6 +547,7 @@ export const ItemTableList = ({ columns: sortedColumns, data, enableHeader, + enableRowBorders, handleExpand, itemType, size,