Function SourceTable

console/src/platform/sources/SourcesList.tsx:260–355

(props: SourceTableProps)

}

export const SourceTable = (props: SourceTableProps) => {
  const sourcePath = useBuildSourcePath();
  const navigate = useNavigate();
  const { colors } = useTheme<MaterializeTheme>();

  return (
    <Table variant="linkable" data-testid="source-table" borderRadius="xl">
      <Thead>
        <Tr>
          <Th>
            <SortToggleButton
              label="Name"
              column="name"
              {...props.sortOptions}
            />
          </Th>
          <Th width="25%">
            <SortToggleButton
              label="Status"
              column="status"
              {...props.sortOptions}
            />
          </Th>
          <Th width="25%">
            <SortToggleButton
              label="Type"
              column="type"
              {...props.sortOptions}
            />
          </Th>
          <Th width={OVERFLOW_BUTTON_WIDTH}></Th>
        </Tr>
      </Thead>
      <Tbody>
        {props.sources.map((s) => (
          <Tr
            key={s.id}
            onClick={() => navigate(sourcePath(s))}
            cursor="pointer"
          >
            <Td {...truncateMaxWidth} py="2">
              <Text
                textStyle="text-small"
                fontWeight="500"
                noOfLines={1}
                color={colors.foreground.secondary}
              >
                {createNamespace(s.databaseName, s.schemaName)}
              </Text>
              <Text textStyle="text-ui-med" noOfLines={1}>
                {s.name}
              </Text>
            </Td>
            <Td>{s.status ? <ConnectorStatusPill connector={s} /> : "-"}</Td>
            <Td {...truncateMaxWidth}>
              <Text textStyle="text-ui-reg" noOfLines={1}>
                {prettyConnectorType(s.type)}
              </Text>