Function WithActionsOnly

packages/react/src/DataTable/DataTable.features.stories.tsx:613–676

()

)

export const WithActionsOnly = () => (
  <>
    <Heading as="h2" id="table-title">
      Repositories
    </Heading>
    <Table.Container>
      <Table.Actions>
        <IconButton aria-label="Download" icon={DownloadIcon} variant="invisible" />
        <IconButton aria-label="Add row" icon={PlusIcon} variant="invisible" />
      </Table.Actions>
      <DataTable
        aria-labelledby="table-title"
        data={data}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
          },
          {
            header: 'Type',
            field: 'type',
            renderCell: row => {
              return <Label>{uppercase(row.type)}</Label>
            },
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
          },
          {
            header: 'Dependabot',
            field: 'securityFeatures.dependabot',
            renderCell: row => {
              return row.securityFeatures.dependabot.length > 0 ? (
                <LabelGroup>
                  {row.securityFeatures.dependabot.map(feature => {
                    return <Label key={feature}>{uppercase(feature)}</Label>
                  })}
                </LabelGroup>
              ) : null
            },
          },
          {
            header: 'Code scanning',
            field: 'securityFeatures.codeScanning',
            renderCell: row => {
              return row.securityFeatures.codeScanning.length > 0 ? (
                <LabelGroup>
                  {row.securityFeatures.codeScanning.map(feature => {
                    return <Label key={feature}>{uppercase(feature)}</Label>
                  })}
                </LabelGroup>
              ) : null
            },