fix(sqllab): Broken query containing 'children' (#25490)

Author: justinpark

superset-frontend/src/components/FilterableTable/FilterableTable.test.tsx

@@ -25,11 +25,11 @@ import userEvent from '@testing-library/user-event';
 
 describe('FilterableTable', () => {
   const mockedProps = {
-    orderedColumnKeys: ['a', 'b', 'c'],
+    orderedColumnKeys: ['a', 'b', 'c', 'children'],
     data: [
-      { a: 'a1', b: 'b1', c: 'c1', d: 0 },
-      { a: 'a2', b: 'b2', c: 'c2', d: 100 },
-      { a: null, b: 'b3', c: 'c3', d: 50 },
+      { a: 'a1', b: 'b1', c: 'c1', d: 0, children: 0 },
+      { a: 'a2', b: 'b2', c: 'c2', d: 100, children: 2 },
+      { a: null, b: 'b3', c: 'c3', d: 50, children: 1 },
     ],
     height: 500,
   };

superset-frontend/src/components/FilterableTable/index.tsx

@@ -366,6 +366,7 @@ const FilterableTable = ({
           usePagination={false}
           columns={columns}
           data={filteredList}
+          childrenColumnName=""
           virtualize
           bordered
         />

superset-frontend/src/components/Table/index.tsx

@@ -150,6 +150,12 @@ export interface TableProps<RecordType> {
    * only supported for virtualize == true
    */
   allowHTML?: boolean;
+
+  /**
+   * The column that contains children to display.
+   * Check https://ant.design/components/table#table for more details.
+   */
+  childrenColumnName?: string;
 }
 
 const defaultRowSelection: React.Key[] = [];
@@ -259,6 +265,7 @@ export function Table<RecordType extends object>(
     recordCount,
     onRow,
     allowHTML = false,
+    childrenColumnName,
   } = props;
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);
@@ -392,6 +399,9 @@ export function Table<RecordType extends object>(
     theme,
     height: bodyHeight,
     bordered,
+    expandable: {
+      childrenColumnName,
+    },
   };
 
   return (