T
TanStack•2y ago
harsh-harlequin

Column type

I have this function to define the columns of a table. 
export const getAttendanceColumns = (data: AttendanceTableData) => {
  const columns: ColumnDef<data>[] = [];
  const columnHelper = createColumnHelper<AttendaceRecord>();

  console.log(data, 'in help');

  data.forEach((day) => {
    Object.keys(day).forEach((key) => {
      if (
        columns.some((c) => c.header === key) ||
        (key === 'attendance_date' && columns.some((c) => c.header === 'اليوم'))
      )
        return;

      if (key === 'attendance_date') {
        return columns.push(
          columnHelper.accessor(key, {
            header: 'اليوم',
            cell: (info) => parseDate(info.getValue()),
          })
        );
      }
      columns.push(
        columnHelper.accessor(key, {
          header: key,
          cell: (info) => parseAttendanceStatus(info.getValue()),
        })
      );
    });
  });

  return columns;
};
export const getAttendanceColumns = (data: AttendanceTableData) => {
  const columns: ColumnDef<data>[] = [];
  const columnHelper = createColumnHelper<AttendaceRecord>();

  console.log(data, 'in help');

  data.forEach((day) => {
    Object.keys(day).forEach((key) => {
      if (
        columns.some((c) => c.header === key) ||
        (key === 'attendance_date' && columns.some((c) => c.header === 'اليوم'))
      )
        return;

      if (key === 'attendance_date') {
        return columns.push(
          columnHelper.accessor(key, {
            header: 'اليوم',
            cell: (info) => parseDate(info.getValue()),
          })
        );
      }
      columns.push(
        columnHelper.accessor(key, {
          header: key,
          cell: (info) => parseAttendanceStatus(info.getValue()),
        })
      );
    });
  });

  return columns;
};
how to define the type of these columns?
1 Reply
harsh-harlequin
harsh-harlequinOP•2y ago
the shape of data: 
[
    {
      "id": 0,
      "attendance_date": "2023-10-01T00:00:00.000Z",
      "عثمان القطش": "ABSENCE",
      "يوسف نوفل": "PRESENT",
      "محمد عليان": "PRESENT",
      "محمد الطويل": "PRESENT",
      "إبراهيم أبو شكيان": "LATE",
      "مالك سليم": "PRESENT",
      "أنس نوفل": "PRESENT",
      "عمر عيد": "LATE",
      "سعيد وهبة": "LATE",
      "عاهد غراب": "ABSENCE",
      "أنور سعد": "LATE"
    }
  ]
[
    {
      "id": 0,
      "attendance_date": "2023-10-01T00:00:00.000Z",
      "عثمان القطش": "ABSENCE",
      "يوسف نوفل": "PRESENT",
      "محمد عليان": "PRESENT",
      "محمد الطويل": "PRESENT",
      "إبراهيم أبو شكيان": "LATE",
      "مالك سليم": "PRESENT",
      "أنس نوفل": "PRESENT",
      "عمر عيد": "LATE",
      "سعيد وهبة": "LATE",
      "عاهد غراب": "ABSENCE",
      "أنور سعد": "LATE"
    }
  ]
and also how to defined the data of a table that is generic, and is used in multi places. 
type AttendaceRecord = {
  id: number;
  attendance_date: string;
} & Record<string, 'LATE' | 'PRESENT' | 'ABSENCE' | 'HOLIDAY'>;

type StudentRecord = {
  id: number;
  createdAt: string;
  updatedAt: string;
  student_id: string;
  first_name: string;
  middle_name: string;
  last_name: string;
  phone_number: string;
  date_of_birth: string;
};

type StudentsTableData = StudentRecord[];
type AttendanceTableData = AttendaceRecord[];

type TableData = AttendanceTableData | StudentsTableData;

type TableProps = {
  data: TableData;
  columns: unknown;
};

const table = useReactTable({
    data,
    getCoreRowModel: getCoreRowModel(),
    columns,
  });
type AttendaceRecord = {
  id: number;
  attendance_date: string;
} & Record<string, 'LATE' | 'PRESENT' | 'ABSENCE' | 'HOLIDAY'>;

type StudentRecord = {
  id: number;
  createdAt: string;
  updatedAt: string;
  student_id: string;
  first_name: string;
  middle_name: string;
  last_name: string;
  phone_number: string;
  date_of_birth: string;
};

type StudentsTableData = StudentRecord[];
type AttendanceTableData = AttendaceRecord[];

type TableData = AttendanceTableData | StudentsTableData;

type TableProps = {
  data: TableData;
  columns: unknown;
};

const table = useReactTable({
    data,
    getCoreRowModel: getCoreRowModel(),
    columns,
  });
the error: Type 'TableData' is not assignable to type 'AttendaceRecord[]'. Type 'StudentsTableData' is not assignable to type 'AttendaceRecord[]'. Type 'StudentRecord' is not assignable to type 'AttendaceRecord'. Property 'attendance_date' is missing in type 'StudentRecord' but required in type '{ id: number; attendance_date: string; }'.ts(2322) types.d.ts(42, 3): 'attendance_date' is declared here. table.d.ts(33, 5): The expected type comes from property 'data' which is declared here on type 'TableOptions<AttendaceRecord>'

Did you find this page helpful?