coreui-free-react-admin-template

coreui-free-react-admin-template copied to clipboard

Using latest pro 4.3.2

We're in the process of renewing the license but hoping you will still answer this question - we are having errors using Typescript on a simple sample code taken from https://coreui.io/react/docs/components/smart-table/

When putting this in a tsx file, typescript will flag Items as missing the _id (underscore id) which is true, but is that supposed to be required? To have both "id" and "_id"? We have been using ts-ignore everywhere but that can't be the answer.

import { CSmartTable } from '@coreui/react-pro';
import React from 'react';
const usersData = [
  { id: 0, name: 'John Doe', registered: '2022/01/01', role: 'Guest', status: 'Pending' },
  {
    id: 1,
    name: 'Samppa Nori',
    registered: '2022/01/01',
    role: 'Member',
    status: 'Active',
    _props: { color: 'primary', align: 'middle' }
  },
  {
    id: 2,
    name: 'Estavan Lykos',
    registered: '2022/02/07',
    role: 'Staff',
    status: 'Banned',
    _cellProps: { all: { className: 'fw-semibold' }, name: { color: 'info' } }
  },
  {
    id: 42,
    name: 'Ford Prefect',
    registered: '2001/05/25',
    role: 'Alien',
    status: "Don't panic!"
  }
];
const ExampleView = (): JSX.Element => {
  return (
    <CSmartTable
      // @ts-ignore
      items={usersData}
      columnFilter
      columnSorter
      pagination
      tableProps={{
        hover: true
      }}
    />
  );
};

export default ExampleView;

@ktwbc I'm working on this issue. I will try to fix it this weekend.

@ktwbc the problem is the new version of TypeScript, not @coreui/react-pro.

Here is solution:

Add this:

import { Item } from '@coreui/react-pro/dist/components/table/CTable'

and change this

...
items={usersData}
...

to this

...
items={usersData as Item[]}
...

Hi -- that will work around the issue but why is that a TypeScript issue? The interface definition if Item shows that _id: is required, t's not optional like _id?: string -- it seems like it's correct it's being flagged but incorrect it's being required? Sorry just trying to understand behaviour.

I guess you were referring to https://github.com/microsoft/TypeScript/issues/49709 ? Flagging private variables

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions