import {
	createMRTColumnHelper,
	MaterialReactTable,
	useMaterialReactTable,
} from 'material-react-table';
type User = {
	id: string,
	name: string;
	age: number;
}
type Task = {
	id: number;
	name: string;
}
type UserWithTask = User & {
	task: Task;
}
const data: UserWithTask[] = [
	{
		id: "1",
		name: 'John',
		age: 30,
		task: {
			id: 1,
			name: "task-1"
		}
	},
	{
		id: "2",
		name: 'Sara',
		age: 25,
		task: {
			id: 2,
			name: "task-2"
		}
	},
	{
		id: "3",
		name: 'Sara',
		age: 20,
		task: {
			id: 3,
			name: "task-3"
		}
	},
	{
		id: "4",
		name: 'Sara',
		age: 20,
		task: {
			id: 3,
			name: "task-3"
		}
	},
	{
		id: "5",
		name: 'Sara',
		age: 25,
		task: {
			id: 2,
			name: "task-2"
		}
	},
];
const columnHelper = createMRTColumnHelper<UserWithTask>();
// To make a variable stable, we define it outside of a component 
// so it does not get recreated on every render and cause an infinite re-render loop.
const columns = [
	columnHelper.accessor("name", {
		header: 'Name',
		enableGrouping: true,
	}),
	columnHelper.accessor("age", {
		header: 'Age',
		enableGrouping: true,
	}),
	columnHelper.accessor("task.name", {
		header: 'Task',
		enableGrouping: true,
	}),
];
export default function UserTable() {
	const table = useMaterialReactTable({
		id: 'table-user',
		columns,
		data, //is stable (because we defined it outside of this component)
		enableGlobalFilter: true,
		enablePagination: false,
		enableStickyHeader: true,
		enableTableFooter: true,
		enableStickyFooter: true,
		enableBottomToolbar: false,
		positionGlobalFilter: 'left',
		enableGrouping: true,
		enableHiding: true,
		groupedColumnMode: 'remove',
		getRowId: (row) => row.id,
		initialState: {
			showGlobalFilter: true
		},
		renderDetailPanel: ({ row }) => <div>Name: {row.original.name}</div>,
	});
	return <MaterialReactTable table={table} />;
}