forked from carbon-design-system/carbon
-
Notifications
You must be signed in to change notification settings - Fork 0
/
TableCell.tsx
63 lines (54 loc) · 1.5 KB
/
TableCell.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import classNames from 'classnames';
import { usePrefix } from '../../internal/usePrefix';
import { ReactAttr } from '../../types/common';
interface TableCellProps extends ReactAttr<HTMLTableCellElement> {
/**
* Pass in children that will be embedded in the table header label
*/
children?: React.ReactNode;
/**
* Specify an optional className to be applied to the container node
*/
className?: string;
/**
* The width of the expanded row's internal cell
*/
colSpan?: number;
/**
* Specify if the table cell is in an AI column
*/
hasSlugHeader?: boolean;
/**
* The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
*/
headers?: string;
}
const TableCell = ({
children,
className,
hasSlugHeader,
colSpan,
...rest
}: TableCellProps) => {
const prefix = usePrefix();
const tableCellClassNames = classNames(className, {
[`${prefix}--table-cell--column-slug`]: hasSlugHeader,
});
return (
<td
className={tableCellClassNames ? tableCellClassNames : undefined}
colSpan={colSpan}
{...rest}>
{children}
</td>
);
};
TableCell.displayName = 'TableCell';
export default TableCell;