InteractiveTable: Extend sort options with disableSortRemove and sortDescFirst (#115352)

* add disableSortRemove option

* add sortDescFirst to Column

* pass sortDescFirst only if it is set

packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx

@@ -153,6 +153,10 @@ interface BaseProps<TableData extends object> {
    * Optional way to set how the table is sorted from the beginning. Must be memoized.
    */
   initialSortBy?: Array<SortingRule<TableData>>;
+  /**
+   * Disable the ability to remove sorting on columns (none -> asc -> desc -> asc)
+   */
+  disableSortRemove?: boolean;
 }
 
 interface WithExpandableRow<TableData extends object> extends BaseProps<TableData> {
@@ -191,6 +195,7 @@ export function InteractiveTable<TableData extends object>({
   showExpandAll = false,
   fetchData,
   initialSortBy = [],
+  disableSortRemove,
 }: Props<TableData>) {
   const styles = useStyles2(getStyles);
   const tableColumns = useMemo(() => {
@@ -222,6 +227,7 @@ export function InteractiveTable<TableData extends object>({
       disableMultiSort: true,
       // If fetchData is provided, we disable client-side sorting
       manualSortBy: Boolean(fetchData),
+      disableSortRemove,
       getRowId,
       initialState: {
         hiddenColumns: [

packages/grafana-ui/src/components/InteractiveTable/types.ts

@@ -26,4 +26,8 @@ export interface Column<TableData extends object> {
    * If the provided function returns `false` the column will be hidden.
    */
   visible?: (data: TableData[]) => boolean;
+  /**
+   * Determines starting sort direction when the column header is clicked.
+   */
+  sortDescFirst?: boolean;
 }

packages/grafana-ui/src/components/InteractiveTable/utils.ts

@@ -33,6 +33,7 @@ export function getColumns<K extends object>(
       disableSortBy: !Boolean(column.sortType),
       width: column.disableGrow ? 0 : undefined,
       visible: column.visible,
+      ...(column.sortDescFirst !== undefined && { sortDescFirst: column.sortDescFirst }),
       ...(column.cell && { Cell: column.cell }),
     })),
   ];