// Table
    const columns = [
        {
            accessorKey: 'action',
            header: '',
            size: '50px',
            cell: ({ row }) => {
                const rowSpan = row.original.station.reduce((total, station) => total + station.step.length, 0);
                return (
                    <td rowSpan={rowSpan}>
                        <div className='text-center'>
                            <i className='mdi mdi-file-eye align-middle fs-6 text-primary' onClick={() => {
                                    getDrawing(row.original.wi_number);
                                    setModalWIDrawingShow(true);
                                }} style={{ cursor: 'pointer' }}
                            ></i>
                        </div>
                    </td>
                );
            },
        },
        {
            accessorKey: 'wi_number',
            header: t('WINumber'),
            size: '50px',
            cell: ({ row }) => {
                const rowSpan = row.original.station.reduce((total, station) => total + station.step.length, 0);
                return (
                    <td className='text-center' rowSpan={rowSpan}>
                        <div >
                            <Link to={`${routes.WIWIDetail.replace(':wiNumber', row.original.wi_number)}`}>
                                {row.original.wi_number}
                            </Link>
                        </div>
                    </td>
                );
            },
        },
        {
            accessorKey: 'status',
            header: t('Status'),
            size: '25px',
            cell: ({ row }) => {
                const rowSpan = row.original.station.reduce((total, station) => total + station.step.length, 0);
                return <td rowSpan={rowSpan}>
                    <div className='text-center'>{row.original.status}</div>
                </td>;
            },
        },
        {
            accessorKey: 'version',
            header: t('Version'),
            size: '25px',
            cell: ({ row }) => {
                const rowSpan = row.original.station.reduce((total, station) => total + station.step.length, 0);
                return <td rowSpan={rowSpan}>
                    <div className='text-center'>{row.original.version}</div>
                </td>;
            },
        },
        {
            accessorKey: 'station_number',
            header: t('StationNumber'),
            size: '10px',
            cell: ({ row }) => {
                const rowSpan = row.original.step.length;
                return <td rowSpan={rowSpan}>
                    <div className='text-center'>{row.original.station_number}</div>
                </td>;
            },
        },
        {
            accessorKey: 'step_id',
            header: t('Step'),
            size: '10px',
            cell: ({ row }) => {
                return <td>
                    <div className='text-center'>{row.original.step_id}</div>
                </td>;
            },
        },
        {
            accessorKey: 'description',
            header: t('Description'),
            size: '250px',
            cell: ({ row }) => {
                return <td>
                    <div className='text-center'>
                        <Form.Control type='text' as='textarea' rows={1} defaultValue={row.original.description} />
                    </div>
                </td>;
            },
        },
        {
            accessorKey: 'before_image',
            header: t('Image'),
            size: '100px',
            cell: ({ row }) => {
                return <td >
                    <div className='text-center'>
                        <img height={30} src={`${import.meta.env.VITE_BACKEND_URL}/${row.original.before_image}?timestamp=${Date.now()}`} onError={(e) => {
                                e.target.src = '/Images/Other/image-not-found.jpg';
                            }}
                        />
                    </div>
                </td >;
            },
        }
    ];