Expected Future Changes

• DataTable is deprecated and may be removed in a future release. Use @tanstack/react-table instead.

• The useSettings plugin may be removed in a future release. Use the column visibility and reordering features built into @tanstack/react-table instead.

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