#434

frontend/src/components/counts/CountsNestedTable.tsx

@@ -3,7 +3,7 @@ import PrefetchLink from '@/components/PrefetchLink'
 import CountsSortHeader from '@/components/counts/CountsSortHeader'
 import CountsSelectableTable from '@/components/counts/CountsSelectableTable'
 import { changeCountSort, readCountSort, selectedCountChildren,
-	 writeCountSort } from '@/lib/counts'
+	 writeCountSort, orderedCountFields } from '@/lib/counts'
 import { countsLogicalName, countsNestedExport,
 	 countsNestedOrder, countsNestedText } from '@/lib/countsDisplay'
 import { useLocale } from '@/lib/useLocale'
@@ -25,7 +25,8 @@ const CountsNestedTable = (
   const { message } = useUITranslation ('counts')
   const locale = useLocale ()
   const selected = selectedCountChildren (params)
-  const columns = fields.filter (field => selected.has (`${path}.${field.key}`))
+  const columns = orderedCountFields (fields, params, path)
+      .filter (field => selected.has (`${path}.${field.key}`))
   const allSorts = readCountSort (params.get ('child_sort'))
   const sorts = allSorts.filter (sort => sort.key.startsWith (`${path}/`))
       .map (sort => ({ ...sort, key: sort.key.slice (path.length + 1) }))
@@ -50,21 +51,19 @@ const CountsNestedTable = (
     return display.text
   }
   return (
-      <details className="w-full min-w-0 max-w-full" open>
-	<summary className="cursor-pointer text-xs" title={message ('nested.toggle').text}>
-	  <LocalisedText language={title.language}>{title.text}</LocalisedText> ({rows.length})
-	</summary>
+      <div className="counts-nested w-full min-w-0 max-w-full">
 	{params.get ('nested_json') === '1' ? (
 	    <pre data-counts-scroll
-		className="mt-1 max-h-72 w-full overflow-auto whitespace-pre-wrap
+		aria-label={title.text} lang={title.language}
+		className="max-h-72 w-full overflow-auto whitespace-pre-wrap
 		    break-words text-xs">
 	      {JSON.stringify (countsNestedExport (rows, fields, path, params, locale), null, 2)}
 	    </pre>) : (columns.length > 0 && rows.length > 0 && (
 	    <div data-counts-scroll
-		className="relative isolate mt-1 max-h-72 w-full min-w-0 overflow-auto">
+		className="relative isolate max-h-72 w-full min-w-0 overflow-auto">
 	      <CountsSelectableTable family={path} columns={columns.map (field => field.key)}
 		  identity={`${path}:${params}`} name={title}
-		  className="border text-xs dark:border-slate-700">
+		  className="text-xs">
 		<thead className="sticky top-0 z-10 bg-background text-foreground
 		    dark:bg-background dark:text-foreground"><tr>
 		  {columns.map (field => (
@@ -101,7 +100,7 @@ const CountsNestedTable = (
 		    </tr>))}</tbody>
 	      </CountsSelectableTable>
 	    </div>))}
-      </details>)
+      </div>)
 }