Using Typescript & Adding Typescript to the docs

[lm93547]

I am trying to strictly type my Node array & while using the sort functionality, I see errors such as Type 'TableNode[]' is not assignable to type 'NodeType[]', any idea how to fix this? I have tried extending my type with TableNode, but when doing this the error Type 'TableNode' is missing the following properties from type 'NodeType': platform, position, openInterest, APY, and 2 more. shows. Any ideas or documentation to support this use case?

NodeType:

interface NodeType extends TableNode {
    id: string;
    platform: string;
    position: string;
    openInterest: string;
    APY: string;
    fixedYield: string;
    variableYield: string;
}

I also believe the docs should include some documentation for using the library with typescript. I can help with this if necessary. Love the library though! Thanks!

[yestoall]

i need more documentation too

[PointSingularity]

I have a similar problem. I wrote a type for the example from the documentation, and I get an error in the columns:

import { Column, CompactTable } from '@table-library/react-table-library/compact';
import { getTheme } from '@table-library/react-table-library/mantine';
import { useTheme } from '@table-library/react-table-library/theme';
import { TableNode } from '@table-library/react-table-library/types/table';

interface CustomNode extends TableNode {
    id: string;
    name: string;
    deadline: Date;
    type: string;
    isComplete: boolean;
    _hasContent: boolean;
    nodes?: CustomNode[] | null;
}
const nodes: CustomNode[] = [
    {
        id: '0',
        name: 'Operating System',
        deadline: new Date(2020, 1, 15),
        type: 'SETUP',
        isComplete: true,
        _hasContent: false,
        nodes: null,
    },
    {
        id: '1',
        name: 'VSCode',
        deadline: new Date(2020, 1, 17),
        type: 'SETUP',
        isComplete: true,
        _hasContent: false,
        nodes: [],
    },

    {
        id: '5',
        name: 'Node',
        deadline: new Date(2020, 5, 18),
        type: 'LEARN',
        isComplete: true,
        _hasContent: true,
        nodes: [
            {
                id: '51',
                name: 'Express',
                deadline: new Date(2020, 5, 10),
                type: 'LEARN',
                isComplete: false,
                _hasContent: false,
                nodes: null,
            },
        ],
    },
    
];

export const CustomTable = () => {
    const data = { nodes };
    const mantineTheme = getTheme();
    const theme = useTheme(mantineTheme);

    const COLUMNS: Column[] = [
        { label: 'Task', renderCell: (item: CustomNode) => item.name },
        {
            label: 'Deadline',
            renderCell: (item: CustomNode) =>
                item.deadline.toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                }),
        },
        { label: 'Type', renderCell: (item: CustomNode) => item.type },
        {
            label: 'Complete',
            renderCell: (item: CustomNode) => item.isComplete.toString(),
        },
        {
            label: 'Tasks',
            renderCell: (item: CustomNode) => item.nodes?.length,
        },
    ];

  

    return <CompactTable columns={COLUMNS}  data={data} theme={theme} />;
};

Nothing but the types has been added, so not sure what is wrong here :\

Quick update: I think this can be remedied by extending the type:

export declare type Column<T extends TableNode =  TableNode> = {
 // default case is a standard TableNode, but can be extended with a new type
    label: string;
    renderCell: (node: T ) => React.ReactNode;
    footer?: string;
    resize?: ColumnResizeProps;
    sort?: ColumnSortProps;
    select?: ColumnSelectProps;
    tree?: ColumnTreeProps;
    pinLeft?: boolean;
    pinRight?: boolean;
    hide?: boolean;
    cellProps?: Record<string, any>;
};

export declare type CompactTableProps = TableProps & {
    columns: Column<T>[];
    tableOptions?: TableOptions;
    rowProps?: RowPropsAsObject;
    rowOptions?: RowOptions;
    virtualizedOptions?: VirtualizedOptions;
};

With this we can define our own nodes by extending the current TableNode, and just passing a generic to the Columns Type. This allows for better typesafety.

interface CustomNode extends TableNode {
    id: string;
    name: string;
    deadline: Date;
    type: string;
    isComplete: boolean;
    _hasContent: boolean;
    nodes?: CustomNode[] | null;
}
...
// no errors now
const COLUMNS: Column<CustomNode>[] = [
        { label: 'Task', renderCell: (item) => item.name },
        {
            label: 'Deadline',
            renderCell: (item) =>
                item.deadline.toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                }),
        },
        { label: 'Type', renderCell: (item) => item.type },
        {
            label: 'Complete',
            renderCell: (item) => item.isComplete.toString(),
        },
        {
            label: 'Tasks',
            renderCell: (item) => item.nodes?.length,
        },
    ];

[criscola]

Yeah would be good to have complete, non-cumbersome support for typescript.

[rwieruch]

Hi everyone. Even though the table library is used in 2 production applications, both are not using TypeScript yet. One of them is in the process of migrating towards TS, where I have seen several TS issues with this library too. Mainly these issues come from missing generics.

As default I have been using type TableNode as baseline throughout the library. However, in a perfect world this would extend as a generic as I have already fixed over here (see the changes in detail). I didn't have the time yet top apply generics everywhere though.

Due to a newborn at home and the company where this library is used migrating only slowly towards TS, any help with this is greatly appreciated!

[rwieruch]

Can someone check out npm install @table-library/react-table-library@4.1.0-beta.0 ? It should have better TS support for the TableNode which is a generic now. So hopefully everything works out of the box now without as type castings.

[proddy]

I'm using TS with my GH project, with a few thousand users so will gladly try it out and report back. Only thing is I'm traveling this week so it'll be next weekend before I can do any real testing

[iceCuube]

to anyone who stumbles across this, you can now just use any object that can extend from TableNode (which requires an id prop of type string | number)

interface Person {
    id: number; // required
    name: string;
    age: number;
}

const data: Person[] = [
    {id: 1, name: "Joe", age: 20},
    {id: 2, name: "Jesse", age: 26},
    {id: 3, name: "Jessie", age: 37},
    {id: 4, name: "Joeseph", age: 21}
];

const COLUMNS: Column<Person>[] = [
    {label: "ID", renderCell: p => p.id},
    {label: "Name", renderCell: p => p.name},
    {label: "Age", renderCell: p => p.age}
];

return (
    <div>
        <CompactTable columns={COLUMNS} data={{nodes: data}} />
    </div>
);