Refer to https://github.com/saas-js/saas-ui/issues/30

react-table-config.d.ts

// Copy to: src/types/react-table-config.d.ts
export * from '@saas-ui/data-table/src/react-table-config.d'

TryDataTable.tsx

import { Column, DataTable } from '@saas-ui/react';


interface ExampleData {
  id: string
  name: string
  email: string
}

const columns: Column<ExampleData>[] = [
  {
    accessor: 'id',
    Header: 'Id',
  },
  {
    accessor: 'name',
    Header: 'Name',
  },
  {
    accessor: 'email',
    Header: 'Email',
  },
]

const data: ExampleData[] = [{
  {
    id: 1,
    name: 'TaShya Charles',
    email: 'urna.nec.luctus@icloud.couk'
  },
  {
    id: 2,
    name: 'Donovan Mosley',
    email: 'lacinia.mattis.integer@icloud.couk',
  },
}]

const TryDataTable = () => {
  return <DataTable<ExampleData> columns={columns} data={data} />
}

tsonfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "useUnknownInCatchVariables": true,
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "types": ["@types/jest"],
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"],
      "~components/*": ["src/components/*"],
      "~utils/*": ["src/utils/*"],
      "~server/*": ["src/server/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"],
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS",
      "types": ["node"]
    }
  }
}