fix(plugin-chart-table): table clear x-filtering highlighting (#1222)

* fix(plugin-chart-table): fix table clear x-filtering highlighting issue

* fix(plugin-chart-table): fix lint

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/TableChart.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { CSSProperties, useCallback, useMemo, useState } from 'react';
+import React, { CSSProperties, useCallback, useMemo } from 'react';
 import { ColumnInstance, ColumnWithLooseAccessor, DefaultSortTypes } from 'react-table';
 import { extent as d3Extent, max as d3Max } from 'd3-array';
 import { FaSort, FaSortDown as FaSortDesc, FaSortUp as FaSortAsc } from 'react-icons/fa';
@@ -161,12 +161,10 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     showCellBars = true,
     emitFilter = false,
     sortDesc = false,
-    filters: initialFilters = {},
+    filters,
     sticky = true, // whether to use sticky header
   } = props;
 
-  const [filters, setFilters] = useState(initialFilters);
-
   const handleChange = useCallback(
     (filters: { [x: string]: DataRecordValue[] }) => {
       if (!emitFilter) {
@@ -196,6 +194,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         },
         filterState: {
           value: groupByValues.length ? groupByValues : null,
+          filters: filters && Object.keys(filters).length ? filters : null,
         },
       });
     },
@@ -241,7 +240,6 @@ export default function TableChart<D extends DataRecord = DataRecord>(
       if (Array.isArray(updatedFilters[key]) && updatedFilters[key].length === 0) {
         delete updatedFilters[key];
       }
-      setFilters(updatedFilters);
       handleChange(updatedFilters);
     },
     [filters, handleChange, isActiveFilterValue],

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/src/transformProps.ts

@@ -186,7 +186,7 @@ const transformProps = (chartProps: TableChartProps): TableChartTransformedProps
     width,
     rawFormData: formData,
     queriesData = [],
-    initialValues: filters = {},
+    filterState,
     ownState: serverPaginationData = {},
     hooks: { onAddFilter: onChangeFilter, setDataMask = () => {} },
   } = chartProps;
@@ -242,7 +242,7 @@ const transformProps = (chartProps: TableChartProps): TableChartTransformedProps
     pageSize: serverPagination
       ? serverPageLength
       : getPageSize(pageLength, data.length, columns.length),
-    filters,
+    filters: filterState.filters,
     emitFilter: tableFilter,
     onChangeFilter,
   };