feat: add column show/hide, pinning, and reordering to data table [PR4]

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-09-04T10:42:40.441Z\n"
-"PO-Revision-Date: 2026-09-04T10:42:40.441Z\n"
+"POT-Creation-Date: 2026-09-04T12:03:11.272Z\n"
+"PO-Revision-Date: 2026-09-04T12:03:11.272Z\n"
 
 msgid "2020"
 msgstr "2020"
@@ -155,53 +155,6 @@ msgstr "Operator"
 msgid "Date"
 msgstr "Date"
 
-msgid "{{filtered}} of {{total}} rows"
-msgstr "{{filtered}} of {{total}} rows"
-
-msgid "{{total}} rows"
-msgstr "{{total}} rows"
-
-msgid "Restore"
-msgstr "Restore"
-
-msgid "Collapse"
-msgstr "Collapse"
-
-msgid "Highlight color"
-msgstr "Highlight color"
-
-msgid "Clear filters"
-msgstr "Clear filters"
-
-msgid "Search all columns"
-msgstr "Search all columns"
-
-msgid "Show only features in current map view"
-msgstr "Show only features in current map view"
-
-msgid "Close"
-msgstr "Close"
-
-msgid "Selected"
-msgstr "Selected"
-
-msgid "Not selected"
-msgstr "Not selected"
-
-msgid "All"
-msgstr "All"
-
-msgid "{{count}} selected"
-msgid_plural "{{count}} selected"
-msgstr[0] "{{count}} selected"
-msgstr[1] "{{count}} selected"
-
-msgid "No features match your filters"
-msgstr "No features match your filters"
-
-msgid "No results found"
-msgstr "No results found"
-
 msgid "Select all visible rows"
 msgstr "Select all visible rows"
 
@@ -265,6 +218,15 @@ msgstr "No matches"
 msgid "No value"
 msgstr "No value"
 
+msgid "Selected"
+msgstr "Selected"
+
+msgid "Not selected"
+msgstr "Not selected"
+
+msgid "All"
+msgstr "All"
+
 msgid "Drill up one level"
 msgstr "Drill up one level"
 
@@ -286,6 +248,60 @@ msgstr "Zoom to selected features"
 msgid "Zoom to filtered features"
 msgstr "Zoom to filtered features"
 
+msgid "No features match your filters"
+msgstr "No features match your filters"
+
+msgid "Clear filters"
+msgstr "Clear filters"
+
+msgid "No results found"
+msgstr "No results found"
+
+msgid "Close"
+msgstr "Close"
+
+msgid "Restore"
+msgstr "Restore"
+
+msgid "Collapse"
+msgstr "Collapse"
+
+msgid "Configure columns"
+msgstr "Configure columns"
+
+msgid "Select all columns"
+msgstr "Select all columns"
+
+msgid "Reset to defaults"
+msgstr "Reset to defaults"
+
+msgid "Drag to reorder"
+msgstr "Drag to reorder"
+
+msgid "Unpin column"
+msgstr "Unpin column"
+
+msgid "Pin column to the left"
+msgstr "Pin column to the left"
+
+msgid "Search across all visible columns"
+msgstr "Search across all visible columns"
+
+msgid "Search all columns"
+msgstr "Search all columns"
+
+msgid "Highlight color"
+msgstr "Highlight color"
+
+msgid "{{filtered}} of {{total}} rows"
+msgstr "{{filtered}} of {{total}} rows"
+
+msgid "{{total}} rows"
+msgstr "{{total}} rows"
+
+msgid "Show only features in current map view"
+msgstr "Show only features in current map view"
+
 msgid "Data table is not supported when events are grouped on the server."
 msgstr "Data table is not supported when events are grouped on the server."
 
@@ -2026,6 +2042,11 @@ msgstr ""
 msgid "Cannot get authorization token for Google Earth Engine."
 msgstr "Cannot get authorization token for Google Earth Engine."
 
+msgid "{{count}} selected"
+msgid_plural "{{count}} selected"
+msgstr[0] "{{count}} selected"
+msgstr[1] "{{count}} selected"
+
 msgid "Thematic"
 msgstr "Thematic"
 

src/actions/dataTable.js

@@ -32,3 +32,9 @@ export const setHighlightColor = (color) => ({
     type: types.HIGHLIGHT_COLOR_SET,
     color,
 })
+
+export const setDataTableColumnConfig = (layerId, config) => ({
+    type: types.DATA_TABLE_COLUMN_CONFIG_SET,
+    layerId,
+    config,
+})

src/components/core/Checkbox.jsx

@@ -43,7 +43,7 @@ Checkbox.propTypes = {
     dataTest: PropTypes.string,
     dense: PropTypes.bool,
     disabled: PropTypes.bool,
-    label: PropTypes.string,
+    label: PropTypes.node,
     style: PropTypes.object,
     tooltip: PropTypes.string,
 }

src/components/core/IconButton.jsx

@@ -1,36 +1,45 @@
 import { Tooltip } from '@dhis2/ui'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { forwardRef } from 'react'
 import styles from './styles/IconButton.module.css'
 
-const IconButton = ({
-    tooltip,
-    onClick,
-    className,
-    children,
-    dataTest,
-    disabled,
-    ariaLabel,
-}) => {
-    return (
-        <button
-            onClick={onClick}
-            className={cx(styles.iconButton, className, {
-                [styles.disabled]: !!disabled,
-            })}
-            data-test={dataTest}
-            disabled={disabled}
-            aria-label={ariaLabel}
-        >
-            {tooltip ? (
-                <Tooltip content={tooltip}>{children}</Tooltip>
-            ) : (
-                children
-            )}
-        </button>
-    )
-}
+const IconButton = forwardRef(
+    (
+        {
+            tooltip,
+            onClick,
+            className,
+            children,
+            dataTest,
+            disabled,
+            ariaLabel,
+        },
+        ref
+    ) => {
+        return (
+            <button
+                ref={ref}
+                type="button"
+                onClick={onClick}
+                className={cx(styles.iconButton, className, {
+                    [styles.disabled]: !!disabled,
+                })}
+                data-test={dataTest}
+                disabled={disabled}
+                aria-label={ariaLabel}
+            >
+                {tooltip ? (
+                    <Tooltip content={tooltip}>{children}</Tooltip>
+                ) : (
+                    children
+                )}
+            </button>
+        )
+    }
+)
+
+IconButton.displayName = 'IconButton'
 
 IconButton.propTypes = {
     ariaLabel: PropTypes.string,

src/components/core/icons.jsx

@@ -13,15 +13,15 @@ export const SortIcon = ({ direction }) => (
             <polygon
                 fill={
                     direction === 'desc'
-                        ? 'var(--colors-blue700)'
+                        ? 'var(--colors-teal600)'
                         : 'var(--colors-grey500)'
                 }
                 points="4 9 12 9 8 14"
             />
             <polygon
                 fill={
                     direction === 'asc'
-                        ? 'var(--colors-blue700)'
+                        ? 'var(--colors-teal600)'
                         : 'var(--colors-grey500)'
                 }
                 points="4 7 12 7 8 2"