Table visualization with column named "children" renders +/- buttons (#4394)

client/app/visualizations/table/Renderer.jsx

@@ -4,12 +4,11 @@ import Table from 'antd/lib/table';
 import Input from 'antd/lib/input';
 import { RendererPropTypes } from '@/visualizations';
 
-import { prepareColumns, filterRows, sortRows } from './utils';
+import { prepareColumns, initRows, filterRows, sortRows } from './utils';
 
 import './renderer.less';
 
 export default function Renderer({ options, data, context }) {
-  const [rowKeyPrefix, setRowKeyPrefix] = useState(`row:1:${options.itemsPerPage}:`);
   const [searchTerm, setSearchTerm] = useState('');
   const [orderBy, setOrderBy] = useState([]);
 
@@ -37,7 +36,7 @@ export default function Renderer({ options, data, context }) {
   );
 
   const preparedRows = useMemo(
-    () => sortRows(filterRows(data.rows, searchTerm, searchColumns), orderBy),
+    () => sortRows(filterRows(initRows(data.rows), searchTerm, searchColumns), orderBy),
     [data.rows, searchTerm, searchColumns, orderBy],
   );
 
@@ -65,13 +64,11 @@ export default function Renderer({ options, data, context }) {
         data-test="TableVisualization"
         columns={tableColumns}
         dataSource={preparedRows}
-        rowKey={(record, index) => rowKeyPrefix + index}
         pagination={{
           size: context === 'widget' ? 'small' : '',
           position: 'bottom',
           pageSize: options.itemsPerPage,
           hideOnSinglePage: true,
-          onChange: (page, pageSize) => setRowKeyPrefix(`row:${page}:${pageSize}:`),
         }}
       />
     </div>

client/app/visualizations/table/utils.js

@@ -56,12 +56,8 @@ export function prepareColumns(columns, searchInput, orderBy, onOrderByChange) {
     const sortColumnIndex = isMultiColumnSort && orderByInfo[column.name] ? orderByInfo[column.name].index : null;
 
     const result = {
-      key: column.name, // set this because we don't use `dataIndex`
-      // Column name may contain any characters (or be empty at all), therefore
-      // we cannot use `dataIndex` because it has special syntax and will not work
-      // for all possible column names. Instead, we'll generate row key dynamically
-      // based on row index
-      dataIndex: null,
+      key: column.name,
+      dataIndex: `record[${JSON.stringify(column.name)}]`,
       align: column.alignContent,
       title: (
         <React.Fragment>
@@ -96,7 +92,7 @@ export function prepareColumns(columns, searchInput, orderBy, onOrderByChange) {
     const initColumn = ColumnTypes[column.displayAs];
     const Component = initColumn(column);
     result.render = (unused, row) => ({
-      children: <Component row={row} />,
+      children: <Component row={row.record} />,
       props: { className: `display-as-${column.displayAs}` },
     });
 
@@ -135,6 +131,10 @@ export function prepareColumns(columns, searchInput, orderBy, onOrderByChange) {
   return tableColumns;
 }
 
+export function initRows(rows) {
+  return map(rows, (record, index) => ({ key: `record${index}`, record }));
+}
+
 export function filterRows(rows, searchTerm, searchColumns) {
   if ((searchTerm !== '') && (searchColumns.length > 0)) {
     searchTerm = searchTerm.toUpperCase();
@@ -147,7 +147,7 @@ export function filterRows(rows, searchTerm, searchColumns) {
       };
     });
 
-    return filter(rows, row => some(matchFields, match => match(row)));
+    return filter(rows, row => some(matchFields, match => match(row.record)));
   }
   return rows;
 }
@@ -164,8 +164,8 @@ export function sortRows(rows, orderBy) {
     let va;
     let vb;
     for (let i = 0; i < orderBy.length; i += 1) {
-      va = a[orderBy[i].name];
-      vb = b[orderBy[i].name];
+      va = a.record[orderBy[i].name];
+      vb = b.record[orderBy[i].name];
       if (isNil(va) || va < vb) {
         // if a < b - we should return -1, but take in account direction
         return -1 * directions[orderBy[i].direction];