package.src.columnHelper.ts Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of table-core Show documentation

Headless UI for building powerful tables & datagrids for TS/JS.

The newest version!

import {
  AccessorFn,
  ColumnDef,
  DisplayColumnDef,
  GroupColumnDef,
  IdentifiedColumnDef,
  RowData,
} from './types'
import { DeepKeys, DeepValue, RequiredKeys } from './utils'

// type Person = {
//   firstName: string
//   lastName: string
//   age: number
//   visits: number
//   status: string
//   progress: number
//   createdAt: Date
//   nested: {
//     foo: [
//       {
//         bar: 'bar'
//       }
//     ]
//     bar: { subBar: boolean }[]
//     baz: {
//       foo: 'foo'
//       bar: {
//         baz: 'baz'
//       }
//     }
//   }
// }

// const test: DeepKeys = 'nested.foo.0.bar'
// const test2: DeepKeys = 'nested.bar'

// const helper = createColumnHelper()

// helper.accessor('nested.foo', {
//   cell: info => info.getValue(),
// })

// helper.accessor('nested.foo.0.bar', {
//   cell: info => info.getValue(),
// })

// helper.accessor('nested.bar', {
//   cell: info => info.getValue(),
// })

export type ColumnHelper = {
  accessor: <
    TAccessor extends AccessorFn | DeepKeys,
    TValue extends TAccessor extends AccessorFn
      ? TReturn
      : TAccessor extends DeepKeys
      ? DeepValue
      : never
  >(
    accessor: TAccessor,
    column: TAccessor extends AccessorFn
      ? DisplayColumnDef
      : IdentifiedColumnDef
  ) => ColumnDef
  display: (column: DisplayColumnDef) => ColumnDef
  group: (column: GroupColumnDef) => ColumnDef
}

export function createColumnHelper<
  TData extends RowData
>(): ColumnHelper {
  return {
    accessor: (accessor, column) => {
      return typeof accessor === 'function'
        ? ({
            ...column,
            accessorFn: accessor,
          } as any)
        : {
            ...column,
            accessorKey: accessor,
          }
    },
    display: column => column as ColumnDef,
    group: column => column as ColumnDef,
  }
}