feat: add support for title and subtitle in LL (DHIS2-21535)

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2026-06-30T04:22:42.079Z\n"
-"PO-Revision-Date: 2026-06-30T04:22:42.081Z\n"
+"POT-Creation-Date: 2026-07-03T12:42:31.329Z\n"
+"PO-Revision-Date: 2026-07-03T12:42:31.331Z\n"
 
 msgid ""
 "Some dimensions were not added because they cannot be used in a "
@@ -579,6 +579,12 @@ msgstr "Options"
 msgid "Display"
 msgstr "Display"
 
+msgid "Line list title"
+msgstr "Line list title"
+
+msgid "Line list subtitle"
+msgstr "Line list subtitle"
+
 msgid "Totals"
 msgstr "Totals"
 

src/components/line-list/heading-row.tsx

@@ -0,0 +1,25 @@
+import { DataTableColumnHeader, DataTableRow } from '@dhis2/ui'
+import cx from 'classnames'
+import type { FC } from 'react'
+import headerClasses from './styles/header-cell.module.css'
+import classes from './styles/heading-row.module.css'
+
+type HeadingRowProps = {
+    text: string
+    colSpan: number
+}
+
+export const HeadingRow: FC<HeadingRowProps> = ({ text, colSpan }) => (
+    <DataTableRow>
+        <DataTableColumnHeader
+            colSpan={colSpan.toString()}
+            className={cx(
+                headerClasses.headerCell,
+                classes.headingCell,
+                'bordered'
+            )}
+        >
+            <span className={classes.heading}>{text}</span>
+        </DataTableColumnHeader>
+    </DataTableRow>
+)

src/components/line-list/line-list.tsx

@@ -18,6 +18,7 @@ import {
 import { BodyCell } from './body-cell'
 import { FetchOverlay } from './fetch-overlay'
 import { HeaderCell } from './header-cell'
+import { HeadingRow } from './heading-row'
 import { LegendKey } from './legend-key'
 import { NoTimeDimensionWarning } from './no-time-dimension-warning'
 import { ScrollBox } from './scroll-box'
@@ -152,6 +153,18 @@ const LineListInternal: FC<LineListProps> = ({
                             dataTest="line-list-data-table-head"
                             className={classes.fixedHead}
                         >
+                            {visualization.title && (
+                                <HeadingRow
+                                    text={visualization.title}
+                                    colSpan={colSpan}
+                                />
+                            )}
+                            {visualization.subtitle && (
+                                <HeadingRow
+                                    text={visualization.subtitle}
+                                    colSpan={colSpan}
+                                />
+                            )}
                             <DataTableRow dataTest="line-list-data-table-head-row">
                                 {headers.map((header) => (
                                     <HeaderCell

src/components/line-list/styles/heading-row.module.css

@@ -0,0 +1,8 @@
+.headingCell :global(.top) {
+    justify-content: center;
+}
+
+.heading {
+    text-align: center;
+    font-weight: bold;
+}

src/components/options/tabs/line-list-style-tab.tsx

@@ -2,13 +2,18 @@ import { DigitGroupSeparator } from '@components/options/fields/digit-group-sepa
 import { DisplayDensity } from '@components/options/fields/display-density'
 import { FontSize } from '@components/options/fields/font-size'
 import { ShowHierarchy } from '@components/options/fields/show-hierarchy'
+import { Subtitle } from '@components/options/fields/subtitle'
+import { Title } from '@components/options/fields/title'
 import { OptionsFieldSet } from '@components/options/options-fieldset'
+import i18n from '@dhis2/d2-i18n'
 import type { FC } from 'react'
 import classes from './styles/tabs.module.css'
 
 export const LineListStyleTab: FC = () => (
     <div className={classes.tab} data-test="line-list-style-tab">
         <OptionsFieldSet>
+            <Title label={i18n.t('Line list title')} />
+            <Subtitle label={i18n.t('Line list subtitle')} />
             <DisplayDensity />
             <FontSize />
             <DigitGroupSeparator />