The following code defines my app logic:
table displaying file.tsx
export type NamingDetail = {
name: string,
test: string,
value: string,
};
export interface HeadCell<T> {
disablePadding?: boolean;
id: keyof T;
label: string;
numeric: boolean;
width?: string;
}
const headCells: HeadCell<NamingDetail>[] = [
{
id: 'name', numeric: false, label: 'Name', width: '12%'
},
{
id: 'test', numeric: false, label: 'TEST', width: '12%'
},
{
id: 'value', numeric: false, label: 'Value', width: '9%'
},
]
const [order, setOrder] = useState<Order>('asc');
const [orderBy, setOrderBy] = useState<keyof NamingDetail>('name');
<CustomTableSort
headCells={headCells}
order={order}
orderBy={orderBy}
onRequestSort={handleRequestSort}
/>
const handleRequestSort = (
event: React.MouseEvent<HTMLButtonElement>,
property: keyof NamingDetail,
) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
};
----TableSort.tsx file
interface CustomTableSortProps<T> {
onRequestSort: (event: React.MouseEvent<HTMLButtonElement>, property: keyof T) => void;
order: Order;
orderBy: keyof T;
}
const CustomTableSort: FunctionComponent<CustomTableSortProps<any>> = <T,>({
onRequestSort, order, orderBy, headCells
}: CustomTableSortProps<T>) => {
const createSortHandler =
(property: keyof T) => (event: React.MouseEvent<HTMLButtonElement>) => {
onRequestSort(event, property);
};
return (<> sorting header cell logic</>
export default CustomTableSort;
falling with the following reason;
Type ‘(event: React.MouseEvent, property: keyof FileNamingDetail) => void’ is not assignable to type ‘(event: MouseEvent<HTMLButtonElement, MouseEvent>, property: string | number | symbol) => void’.
Types of parameters ‘property’ and ‘property’ are incompatible.
Type ‘string | number | symbol’ is not assignable to type ‘keyof NamingDetail’.
Type ‘string’ is not assignable to type ‘keyof NamingDetail’.
971 | order={order}
972 | orderBy={orderBy}
973 | onRequestSort={handleRequestSort}
| ^^^^^^^^^^^^^
974 | />