Build a datatable component based on this package to have default configurations using typescript

[ceciiiron]

I am trying to build a datatable component to reuse default configurations for my mantine-datatable. However, I have problems building the component using typescript. Here's what I've tried:

import {
	DataTableProps,
	DataTableRowExpansionCollapseProps,
	DataTableSortProps,
	DataTableSelectionProps,
	DataTableEmptyStateProps,
	DataTablePaginationProps,
	DataTableOuterBorderProps,
	DataTableRowExpansionProps,
	DataTableDefaultColumnProps,
	DataTable as MantineDatatable
} from "mantine-datatable";

export const DataTable = (
	props: DataTableProps<T> &
		DataTableRowExpansionCollapseProps &
		DataTableSortProps &
		DataTableSelectionProps &
		DataTableEmptyStateProps &
		DataTablePaginationProps &
		DataTableOuterBorderProps &
		DataTableRowExpansionProps &
		DataTableDefaultColumnProps
) => {
	return (
		<MantineDatatable
			striped
			textSelectionDisabled
			withRowBorders={true}
			withTableBorder={false}
			highlightOnHover
			borderRadius="sm"
			minHeight={500}
			defaultColumnProps={{
				titleClassName: "text-xs p-2 font-light",
				cellsClassName: "text-xs p-2 break-words"
			}}
			loaderBackgroundBlur={3}
			loadingText="Fetching data"
			{...props}
		/>
	);
};

Above code results in: is not assignable to type IntrinsicAttributes & DataTableProps<any>
Sorry if my code is bad, I am new to typescript

[reintroducing]

here is a custom component i built to do practically the same, hopefully it helps you:

import {ReactNode} from 'react';
import cx from 'clsx';
import {Paper} from '@mantine/core';
import {DataTable, DataTableProps} from 'mantine-datatable';
import {IconChevronUp, IconSelector} from '@tabler/icons-react';
import css from './Table.module.css';

export type TableProps<T = Record<string, unknown>> = DataTableProps<T> & {
    header?: ReactNode;
    footer?: ReactNode;
};

const Table = <T,>({
    noRecordsText = 'No data available. If filters are applied, try resetting them.',
    header,
    footer,
    ...props
}: TableProps<T>) => (
    <Paper withBorder>
        {header && <div className={css.header}>{header}</div>}
        <DataTable
            classNames={{
                root: cx({
                    [css.tableBorderTop]: !!header,
                    [css.tableBorderBottom]: !!footer,
                }),
            }}
            striped
            stripedColor="gray.0"
            highlightOnHover
            noRecordsText={noRecordsText}
            sortIcons={{
                sorted: <IconChevronUp size={14} />,
                unsorted: <IconSelector size={14} />,
            }}
            {...((props.records?.length === 0 || props.fetching) && {
                minHeight: 150,
            })}
            {...props}
        />
        {footer && <div className={css.footer}>{footer}</div>}
    </Paper>
);

export default Table;

[ceciiiron]

Thank you! this worked perfectly. I think I need further understanding of typescript.