The useSettings plugin adds the ability to show, hide, and rearrange the columns in your DataTable. No additional configuration is required for this plugin.

To hide a column by default add the hiddenToStart: true key/value to that column.

const columns = [
  {
    key: 'name',
    label: 'Name',
    hiddenToStart: true, // hide this column to start
  },
  ...
];

Result

Loading...

Live Editor

const columns = [
  {
    key: 'name',
    label: 'Name',
  },
  {
    key: 'income',
    label: 'Income',
  },
  {
    key: 'type',
    label: 'Type',
  },
  {
    key: 'color',
    label: 'Color',
  },
  {
    key: 'food',
    label: 'Food',
  },
];

const initialData = [
  {
    id: 1,
    name: 'Moe',
    income: 1000,
    type: 'personal',
    color: 'blue',
    food: 'Burger',
  },
  {
    id: 2,
    name: 'Larry',
    income: null,
    type: 'business',
    color: 'red',
    food: 'Hot Dog',
  },
  {
    id: 3,
    name: 'Curly',
    income: 1,
    type: 'other',
    color: 'green',
    food: 'Corn',
  },
];

const Example = () => {
  const [data, setData] = React.useState(initialData);
  const useSettingsPlugin = useSettings();

  return (
    <DataTable
      id="demo-component"
      columns={columns}
      data={data}
      plugins={[useSettingsPlugin]}
      title="Clients"
      responsive
      stacked
    />
  );
};

render(<Example />);

Plugin

useSettings

Create a plugin hook that enables settings on the DataTable (add, remove, and rearrange columns).

Parameters

• props PluginProperties (optional, default {})

Returns Plugin