Kl datalist employee table

packages/styleguide/src/lib/Organisms/Lists & Tables/DataList/CurrentEmployeeTable.tsx

@@ -0,0 +1,175 @@
+// @ts-nocheck
+import { DataList, FlexBox, Text } from '@codecademy/gamut';
+import styled from '@emotion/styled';
+
+const StyledDataListWrapper = styled.div`
+  width: 100%;
+
+  thead tr {
+    background: var(--color-background-selected) !important;
+  }
+
+  thead th,
+  thead th a {
+    font-weight: 700;
+  }
+`;
+
+const EmployeeCell = ({ name, role }) => (
+  <FlexBox flexDirection="column">
+    <Text fontWeight={700} variant="p-large">
+      {name}
+    </Text>
+    <Text variant="p-small">{role}</Text>
+  </FlexBox>
+);
+
+const columns = [
+  {
+    header: 'Employee',
+    key: 'employee',
+    size: 'xl',
+    sortable: true,
+    type: 'header',
+  },
+  {
+    header: 'Skill health avg',
+    key: 'skillHealthAvg',
+    size: 'lg',
+    sortable: true,
+  },
+  {
+    header: 'Skill spread',
+    key: 'skillSpread',
+    size: 'lg',
+    sortable: true,
+  },
+  {
+    header: 'Gaps',
+    key: 'gaps',
+    size: 'md',
+    sortable: true,
+  },
+  {
+    header: 'Gaps closed',
+    key: 'gapsClosed',
+    size: 'md',
+    sortable: true,
+  },
+];
+
+const rows = [
+  {
+    id: '1',
+    employee: (
+      <EmployeeCell name="Joshua Lewis" role="Quality Control Analyst" />
+    ),
+    skillHealthAvg: 'On target',
+    skillSpread: '44 skills',
+    gaps: 2,
+    gapsClosed: '0 +6%',
+  },
+  {
+    id: '2',
+    employee: (
+      <EmployeeCell
+        name="Kathryn Mallory Murphy-Richards"
+        role="Clinical Data Manager"
+      />
+    ),
+    skillHealthAvg: 'Needs improvement',
+    skillSpread: '19 skills',
+    gaps: 2,
+    gapsClosed: '0 +6%',
+  },
+  {
+    id: '3',
+    employee: (
+      <EmployeeCell
+        name="Cameron Williamson"
+        role="Regulatory Affairs Specialist"
+      />
+    ),
+    skillHealthAvg: 'Above target',
+    skillSpread: '23 skills',
+    gaps: 1,
+    gapsClosed: '0 +6%',
+  },
+  {
+    id: '4',
+    employee: (
+      <EmployeeCell name="Theresa Webb" role="Pharmacovigilance Scientist" />
+    ),
+    skillHealthAvg: 'Needs improvement',
+    skillSpread: '41 skills',
+    gaps: 1,
+    gapsClosed: '0 +6%',
+  },
+  {
+    id: '5',
+    employee: (
+      <EmployeeCell name="Savannah Nguyen" role="Medical Science Liaison" />
+    ),
+    skillHealthAvg: 'On target',
+    skillSpread: '18 skills',
+    gaps: 0,
+    gapsClosed: '0 +6%',
+  },
+  {
+    id: '6',
+    employee: <EmployeeCell name="Jacob Jones" role="Research Scientist" />,
+    skillHealthAvg: 'Above target',
+    skillSpread: '33 skills',
+    gaps: 0,
+    gapsClosed: '0 +6%',
+  },
+  {
+    id: '7',
+    employee: (
+      <EmployeeCell name="Jane Cooper" role="Clinical Trial Coordinator" />
+    ),
+    skillHealthAvg: 'Critical',
+    skillSpread: '40 skills',
+    gaps: 4,
+    gapsClosed: '0 +6%',
+  },
+  {
+    id: '8',
+    employee: (
+      <EmployeeCell name="Joshua Lewis" role="Quality Assurance Manager" />
+    ),
+    skillHealthAvg: 'Needs improvement',
+    skillSpread: '29 skills',
+    gaps: 3,
+    gapsClosed: '0 +6%',
+  },
+  {
+    id: '9',
+    employee: (
+      <EmployeeCell
+        name="Kathryn Mallory Murphy-Richards"
+        role="Formulation Development Scientist"
+      />
+    ),
+    skillHealthAvg: 'Needs improvement',
+    skillSpread: '12 skills',
+    gaps: 1,
+    gapsClosed: '0 +6%',
+  },
+];
+
+export function CurrentEmployeeTable() {
+  return (
+    <StyledDataListWrapper>
+      <DataList
+        header
+        id="employees-table"
+        idKey="id"
+        rows={rows}
+        columns={columns}
+        spacing="normal"
+        onRowSelect={() => {}}
+      />
+    </StyledDataListWrapper>
+  );
+}

packages/styleguide/src/lib/Organisms/Lists & Tables/DataList/DataList.mdx

@@ -191,6 +191,18 @@ The example below demonstrates the difference between default container query be
 
 <Callout text="In most cases, you should use the default container query behavior as it provides better responsive design. Only disable container queries when you have specific layout requirements that conflict with the default behavior." />
 
+## Employee table example
+
+An example of a DataList used to display employee skill data, with custom cell renderers for health status tags, gap warning indicators, and a row action menu.
+
+<Canvas of={DataListStories.EmployeeTableExample} />
+
+### Passing React elements directly as row values
+
+Row values can be React elements — rendered as-is inside the cell without needing a `render` function on the column. This is useful when the data is already shaped at the call site.
+
+<Canvas of={DataListStories.CurrentEmployeeTableExample} />
+
 ## Playground
 
 <Canvas sourceState="shown" of={DataListStories.Default} />

packages/styleguide/src/lib/Organisms/Lists & Tables/DataList/DataList.stories.tsx

@@ -12,6 +12,8 @@ import {
   simpleColumns,
   simpleRows,
 } from '../examples';
+import { CurrentEmployeeTable } from './CurrentEmployeeTable';
+import { EmployeeTable } from './EmployeeTable';
 
 const meta: Meta<typeof DataList> = {
   component: DataList,
@@ -213,3 +215,11 @@ export const DisableContainerQuery: Story = {
   args: {},
   render: () => <DataListDisableContainerQueryExample />,
 };
+
+export const EmployeeTableExample: Story = {
+  render: () => <EmployeeTable />,
+};
+
+export const CurrentEmployeeTableExample: Story = {
+  render: () => <CurrentEmployeeTable />,
+};