useSettings

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 />);

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