feat: support multiple columns with time grain in Table Chart (#21547)

superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx

@@ -23,7 +23,9 @@ import {
   ensureIsArray,
   FeatureFlag,
   GenericDataType,
+  isAdhocColumn,
   isFeatureEnabled,
+  isPhysicalColumn,
   QueryFormColumn,
   QueryMode,
   smartDateFormatter,
@@ -145,7 +147,7 @@ const percentMetricsControl: typeof sharedControls.metrics = {
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
-    sections.legacyTimeseriesTime,
+    sections.genericTime,
     {
       label: t('Query'),
       expanded: true,
@@ -186,6 +188,39 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) && isAggMode
+            ? {
+                name: 'time_grain_sqla',
+                config: {
+                  ...sharedControls.time_grain_sqla,
+                  visibility: ({ controls }) => {
+                    const dttmLookup = Object.fromEntries(
+                      ensureIsArray(controls?.groupby?.options).map(option => [
+                        option.column_name,
+                        option.is_dttm,
+                      ]),
+                    );
+
+                    return ensureIsArray(controls?.groupby.value)
+                      .map(selection => {
+                        if (isAdhocColumn(selection)) {
+                          return true;
+                        }
+                        if (isPhysicalColumn(selection)) {
+                          return !!dttmLookup[selection];
+                        }
+                        return false;
+                      })
+                      .some(Boolean);
+                  },
+                },
+              }
+            : null,
+          isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) && isAggMode
+            ? 'datetime_columns_lookup'
+            : null,
+        ],
         [
           {
             name: 'metrics',