Settings Toggle is broken

[Floridus]

Griddle version

1.11.2

Expected Behavior

I want to see all settings like pageSize, visbile and hidden columns.

Actual Behavior

At the top right in the corner you can see a white empty div which should show all settings. But it was always empty with me since I started working with griddle. I do not know how to show it. Please help. Have read through all the documentation and found nothing on the subject.

Steps to reproduce

I am working with the fakeData.js file from griddle.

Test.jsx, so I call the component

const columns = [
    {
      id: 'name',
      name: 'Name',
    },
    {
      id: 'state',
      name: 'Location',
    },
    {
      id: 'company',
      name: 'Organization',
    },
  ];
render() {
  <DataList data={fakeData} columns={columns} />
}

Layout.jsx File for the new Layout

import React from 'react';

import styles from './Layout.scss';

const Layout = ({ Table, Pagination, Filter, SettingsWrapper, style, className }) => (
  <div className={className} style={style}>
    <div className={styles.topSection}>
      <div className={styles.griddleFilter}>
        <Filter />
      </div>
      <div>
        <SettingsWrapper />
      </div>
    </div>
    <div className={styles.griddleContainer}>
      <Table />
      <div className={styles.griddleFooter}>
        <div className={styles.griddlePage}>
          <Pagination />
        </div>
      </div>
    </div>
  </div>
);

export default Layout;

DataList.jsx for my "griddle"-Component

import React from 'react';
import PropTypes from 'prop-types';
import Griddle, {plugins, RowDefinition, ColumnDefinition} from 'griddle-react';

import styles from './DataList.scss';

import CustomPageDropDown from '../Griddle/PageDropdown';
import CustomPagination from '../Griddle/Pagination';
import CustomSettingsToggle from '../Griddle/SettingsToggle';
import CustomLayout from '../Griddle/Layout';

function DataList(props) {
  const styleConfig = {
    classNames: {
      Filter: styles.griddleFilterInput,
      Table: styles.griddleTable,
      TableBody: styles.gridTableBody,
      TableHeadingCell: styles.griddleTableHeadingCell,
      NextButton: styles.griddlePageButton,
      PreviousButton: styles.griddlePageButton,
      Settings: styles.griddleSettings,
      SettingsToggle: styles.griddleSettingsToggle,
    },
  };
  const pageProperties = {
    currentPage: 1,
    pageSize: 25,
  };
  let columnList = null;
  if (props.columns) {
    columnList = props.columns.map((column) => (
      <ColumnDefinition key={column.id} id={column.id} title={column.name} />
    ));
  }

  return (
    <Griddle
      pageProperties={pageProperties}
      styleConfig={styleConfig}
      data={props.data}
      components={{
        Layout: CustomLayout,
        PageDropdown: CustomPageDropDown,
        Pagination: CustomPagination,
        SettingsToggle: CustomSettingsToggle,
      }}
      textProperties={{
        next: 'Nächste',
        previous: 'Vorige',
        settingsToggle: 'Einstellungen',
      }}
      plugins={[plugins.LocalPlugin]}>
      {columnList ?
        <RowDefinition>
          {columnList}
        </RowDefinition>
        : null
      }
    </Griddle>
  );
}

DataList.propTypes = {
  data: PropTypes.array.isRequired,
  columns: PropTypes.array,
};

DataList.defaultProps = {
  columns: null,
};

export default DataList;

[dahlbyk]

Nothing jumps out at me here as obviously wrong. Can you share your SettingsToggle? A CodeSandbox (here's a Griddle template) could help troubleshoot.

[Floridus]

In your example, unfortunately, the settings do not work either? So when I click on the button "Settings", I do not see anything anymore.

Here my SettingsToggle File

SettingsToggle.jsx

import React from 'react';
import ReactTooltip from 'react-tooltip';

const SettingsToggle = ({ onClick, text, style, className }) => (
  <button
    onClick={onClick}
    type="button"
    style={style}
    className={className}
    data-tip
    data-for="config"
  >
    <i className="fa fa-cog" />
    <ReactTooltip id="config" effect="solid">
      <span>{text}</span>
    </ReactTooltip>
  </button>
);

export default SettingsToggle;

[Floridus]

I am sorry, my mistake. Wrong button when commenting.

[dahlbyk]

Interesting...looks like I broke it!

The regression is in 3577f8f from #757: my refactoring left out settingsComponentObjects! Downgrading to 1.10.1 fixes the issue (sandbox), or you can assign settingsComponentObjects directly on your <Griddle /> or via a plugin: https://codesandbox.io/s/wnwqnwkl5w.

[Floridus]

Thank you very much. I'm currently sick, but will test it when I'm well again :)

[dahlbyk]

This has been released with griddle-react@1.13.0, though not tagged as latest yet.