minimal col pinning

relates to #372
stumpapp · Aug 18, 2024 · be48215 · be48215
1 parent 5978a95
commit be48215
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/packages/browser/src/components/table/Table.tsx b/packages/browser/src/components/table/Table.tsx
@@ -34,12 +34,13 @@ export interface TableProps<T = unknown, V = unknown> {
 	sortable?: boolean
 	emptyRenderer?: () => React.ReactNode
 	isZeroBasedPagination?: boolean
+	cellClassName?: string
 }
 
-// TODO: properly support pinned columns, which means I likely need to break out components (TableCell, TableHeaderCell, etc)
 // TODO: move into components package!
 // TODO: loading state
 // TODO: total count for pagination...
+
 export default function Table<T, V>({
 	data,
 	columns,
@@ -48,6 +49,7 @@ export default function Table<T, V>({
 	sortable,
 	emptyRenderer,
 	isZeroBasedPagination,
+	cellClassName,
 	...props
 }: TableProps<T, V>) {
 	const rootRef = useRef<HTMLDivElement | null>(null)
@@ -204,7 +206,7 @@ export default function Table<T, V>({
 											return (
 												<td
 													key={cell.id}
-													className="py-2 first:pl-2.5"
+													className={cn('py-2 first:pl-2.5', cellClassName)}
 													style={{
 														width: cell.column.getSize(),
 														...getCommonPinningStyles(cell.column),

diff --git a/packages/browser/src/scenes/settings/server/email/devices/DevicesTable.tsx b/packages/browser/src/scenes/settings/server/email/devices/DevicesTable.tsx
@@ -93,6 +93,7 @@ export default function DevicesTable({ onSelectForUpdate }: Props) {
 					options={{
 						onPaginationChange: setPagination,
 						state: {
+							columnPinning: canEditEmailer ? { right: ['actions'] } : undefined,
 							pagination,
 						},
 					}}
@@ -110,6 +111,7 @@ export default function DevicesTable({ onSelectForUpdate }: Props) {
 						</div>
 					)}
 					isZeroBasedPagination
+					cellClassName="bg-background-surface"
 				/>
 			</Card>
 		</>

diff --git a/packages/browser/src/scenes/settings/server/jobs/JobTable.tsx b/packages/browser/src/scenes/settings/server/jobs/JobTable.tsx
@@ -152,7 +152,7 @@ export default function JobTable() {
 					onPaginationChange: setPagination,
 					pageCount,
 					state: {
-						// columnPinning: { right: ['actions'] },
+						columnPinning: { right: ['actions'] },
 						pagination,
 					},
 				}}
@@ -169,6 +169,7 @@ export default function JobTable() {
 					</div>
 				)}
 				isZeroBasedPagination
+				cellClassName="bg-background-surface"
 			/>
 
 			<JobDataInspector data={inspectingData} onClose={() => setInspectingData(null)} />

diff --git a/packages/browser/src/scenes/settings/server/users/user-table/UserTable.tsx b/packages/browser/src/scenes/settings/server/users/user-table/UserTable.tsx
@@ -66,13 +66,14 @@ const baseColumns = [
 		),
 		header: () => (
 			<div className="flex w-full items-center gap-2">
-				<span>Active sessions</span>
+				<span>Sessions</span>
 				<ToolTip content="The number of non-expired login sessions for this user">
 					<HelpCircle className="h-3 w-3" />
 				</ToolTip>
 			</div>
 		),
 		id: 'login_sessions_count',
+		size: 110,
 	}),
 	columnHelper.display({
 		cell: ({ row: { original } }) => (
@@ -82,6 +83,7 @@ const baseColumns = [
 		),
 		header: 'Status',
 		id: 'is_locked',
+		size: 100,
 	}),
 ] as ColumnDef<User>[]
 
@@ -120,11 +122,15 @@ export default function UserTable() {
 					onPaginationChange: setPagination,
 					pageCount,
 					state: {
+						columnPinning: {
+							right: ['actions'],
+						},
 						pagination,
 					},
 				}}
 				data={users}
 				fullWidth
+				cellClassName="bg-background-surface"
 			/>
 			<InspectUserSlideOver user={inspectingUser} onClose={() => setInspectingUser(null)} />
 		</Card>