#434

frontend/src/components/counts/CountsResults.tsx

@@ -1,5 +1,6 @@
 import LocalisedText from '@/components/LocalisedText'
 import PrefetchLink from '@/components/PrefetchLink'
+import CountsRowNumber from '@/components/counts/CountsRowNumber'
 import CountsNestedTable from '@/components/counts/CountsNestedTable'
 import CountsSortHeader from '@/components/counts/CountsSortHeader'
 import CountsResizeHandle from '@/components/counts/CountsResizeHandle'
@@ -7,7 +8,8 @@ import CountsSelectableTable from '@/components/counts/CountsSelectableTable'
 import PostThumbnailPreview from '@/components/posts/PostThumbnailPreview'
 import { changeCountSort, countColumns, countsRequestParams, fieldsForCounts,
 	 readCountSort, selectedCountColumns, writeCountSort } from '@/lib/counts'
-import { countsCellCopy, countsCellText, countsImageURL, countsNestedRows } from '@/lib/countsDisplay'
+import { countsCellCopy, countsCellText, countsImageURL, countsNestedRows }
+    from '@/lib/countsDisplay'
 import useDialogue from '@/lib/dialogues/useDialogue'
 import { useLocale } from '@/lib/useLocale'
 import { useCountsDefinition } from '@/lib/countsDefinitions'
@@ -30,6 +32,8 @@ const CountsResults = (
   const locale = useLocale ()
   const dialogue = useDialogue ()
   const columns = selectedCountColumns (resource, params, definition)
+  const rowNumbers = params.get ('row_numbers') === '1'
+  const tableColumns = rowNumbers ? ['row_number', ...columns] : columns
   const fields = fieldsForCounts (resource, definition)
   const sorts = readCountSort (params.get ('sort') ?? 'created_at:desc')
   const sort = (key: string, additive: boolean) =>
@@ -94,14 +98,15 @@ const CountsResults = (
   }
   return (
       <div className="min-h-0 flex-1 overflow-auto" data-counts-results aria-busy={pending}>
-	{columns.length === 0 ? <p>{label ('nested.noColumns')}</p> : (
+	{tableColumns.length === 0 ? <p>{label ('nested.noColumns')}</p> : (
 	    <CountsSelectableTable family={resource}
-		columns={columns}
-		identity={`${resource}:${countsRequestParams (params)}:${columns.join (',')}:${
+		columns={tableColumns}
+		identity={`${resource}:${countsRequestParams (params)}:${tableColumns.join (',')}:${
 		    (data.versions ?? []).map (row => row.id)}`}
 		className="text-left text-sm">
 	      <thead className="sticky top-0 z-20 bg-background text-foreground
 		  dark:bg-background dark:text-foreground"><tr>
+		{rowNumbers && <CountsRowNumber/>}
 		{columns.map (column => column === 'thumbnail'
 		    ? <th key={column} data-counts-heading={message (countColumns[column]).text}
 			className="relative px-2 py-1">
@@ -114,8 +119,10 @@ const CountsResults = (
 			    field => field.key === column)?.children != null}/>)}
 	      </tr></thead>
 	      <tbody>
-		{(data.versions ?? []).map (row => (
+		{(data.versions ?? []).map ((row, index) => (
 		    <tr key={row.id} className="border-b dark:border-slate-700">
+		      {rowNumbers && <CountsRowNumber
+			  value={(data.page - 1) * data.limit + index + 1}/>}
 		      {columns.map (column => (
 			  <td key={column}
 			      className="overflow-hidden break-words border-b px-2 py-1