[docs] Add docs for components and functions

src/TableComponentsContext.tsx

@@ -15,6 +15,12 @@ export interface TableComponentsContextType {
   Th: ElementType;
   Td: ElementType;
 }
+
+/**
+ * `HTML` elements used as default components for table
+ *
+ * @internal
+ */
 const defaultTableComponents: TableComponentsContextType = {
   Table: 'table',
   Thead: 'thead',
@@ -24,6 +30,10 @@ const defaultTableComponents: TableComponentsContextType = {
   Td: 'td',
 };
 
+/**
+ * Table components can be customized using this context.
+ * Defautl table components are `HTML` elements for table.
+ */
 export const TableComponentsContext: Context<TableComponentsContextType> = createContext<
   TableComponentsContextType
 >(defaultTableComponents);
@@ -40,6 +50,25 @@ export type TableComponentsContextProviderProps = PropsWithChildren<
   TableComponentsContextProviderOwnProps
 >;
 
+/**
+ * Provides the value for `TableComponentsContext`
+ *
+ * @example
+ * // Custom `tr` which calls the `onClick` callback with the current index of row
+ * function CustomTr = ({children}:{children: React.ReactNode}) {
+ *  const index = useIndexContext()
+ *  const onClick = useOnClickContext()
+ *  return <tr onClick={() => onClick(index)}>{children}</tr>
+ * }
+ *
+ *
+ * @example
+ * // Custom `td` which sets the background color to `red` if the value of the cell is less than 10, otherwise sets it to `green`
+ * function CustomTd = ({children}:{children: React.ReactNode}) {
+ *  const value = useCellContext()
+ *  return <td style={{background: value > 10 ? 'green' : 'red'}}>{children}</td>
+ * }
+ */
 export function TableComponentsContextProvider(
   props: TableComponentsContextProviderProps,
 ) {

src/array/ArrayOutput.tsx

@@ -11,6 +11,14 @@ export type ArrayOutputProps<V> = PropsWithChildren<ArrayOutputOwnProps<V>>;
 
 const defaultGetKey = (value: any, index: number) => index;
 
+/**
+ *
+ * `ArrayOutput` renders provided `children` component once for each element in `value`, in order.
+ * It provides `ItemContext` and `IndexContext` to `children`, so it acts like Javascript `map` method.
+ *
+ * @param props.value - Array of elements to iterate through.
+ * @param props.getKey - `key` for each item will be calculated based on its value and index. If not provided, `index` will be used as `key`
+ */
 export function ArrayOutput<V>(props: ArrayOutputProps<V>) {
   const { value: values, children, getKey = defaultGetKey } = props;
   return (

src/array/ItemContext.tsx

@@ -10,6 +10,12 @@ export const ItemContext: Context<
   ItemContextType<any> | undefined
 > = createContext<ItemContextType<any> | undefined>(undefined);
 
+/**
+ * Returns the current context value for `ItemContext`.
+ * If `value` is provided, it will ignore the context value and return the given `value`.
+ *
+ * @param value - Overrides context
+ */
 export function useItem<V>(value?: V): ItemContextType<V> {
   const context = useContext(ItemContext);
   if (value !== undefined) {

src/cell/Cell.tsx

@@ -9,6 +9,12 @@ interface CellOwnProps<D, C> {
 
 export type CellProps<D, C> = PropsWithChildren<CellOwnProps<D, C>>;
 
+/**
+ * Wraps its `children` with the component for `td`.
+ * Also provides its `children` with `ContentContext`.
+ *
+ * @param props.accessor - Specifies which field should be displayed in this cell.
+ */
 export function Cell<D, C>(props: CellProps<D, C>) {
   const { accessor, children } = props;
   const Components = useTableComponentsContext();

src/column/Column.tsx

@@ -12,6 +12,20 @@ interface ColumnOwnProps<D, C> {
 
 export type ColumnProps<D, C> = PropsWithChildren<ColumnOwnProps<D, C>>;
 
+/**
+ * Table column, values based on `data` passed on to `DataTable`
+ *
+ * @param props.header - Column title rendered in `th`
+ * @param props.accessor - Bind the column to `data`.
+ *
+ * @example
+ * // This column will display `data.location.latitude` values
+ * <Column accessor="location.latitude" header="Latitude" />
+ *
+ *  @example
+ * // You can compute values based on row values
+ * <Column accessor={(row) => `${row.location.latitude} , ${row.location.longitude}`} header="lat/long"
+ */
 export function Column<D, C>(props: ColumnProps<D, C>) {
   const { children = <DefaultContent />, accessor = null } = props;
   const part = useTablePart();

src/column/Columns.tsx

@@ -5,6 +5,22 @@ interface ColumnsOwnProps {}
 
 export type ColumnsProps = PropsWithChildren<ColumnsOwnProps>;
 
+/**
+ * Wraps `Column` components within
+ *
+ * @example
+ * <Columns>
+ *   <Column header="Name" accessor="name">
+ *     <StringCell />
+ *   </Column>
+ *   <Column header="Price" accessor="price">
+ *     <NumberCell />
+ *   </Column>
+ *   <Column header="Color" accessor="color">
+ *     <StringCell />
+ *   </Column>
+ * </Columns>
+ */
 export function Columns(props: ColumnsProps) {
   const { children } = props;
   const part = useTablePart();

src/column/findColumns.ts

@@ -1,6 +1,10 @@
 import React, { ReactElement, ReactNode } from 'react';
 import { isColumnsType } from './ColumnsType';
 
+/**
+ * Find `Columns` component from `children` and returns it.
+ * If there are multiple `Columns` component, the last one will be returned.
+ */
 export function findColumns<D extends object = {}>(
   children: ReactNode,
 ): ReactElement | null {

src/content/ContentValue.tsx

@@ -12,6 +12,11 @@ export type ContentValueProps<D, C> = PropsWithChildren<
   ContentValueOwnProps<D, C>
 >;
 
+/**
+ * Provides `value` based on the `accessor` given and the row it is being used in.
+ *
+ * @param props.accessor - Specifies which field should be provided as content.
+ */
 export function ContentValue<D, C>(props: ContentValueProps<D, C>) {
   const { accessor, children = <DefaultContent /> } = props;
   const value = useContentValue(accessor);

src/content/DefaultContent.tsx

@@ -2,10 +2,14 @@ import React, { Fragment, PropsWithChildren } from 'react';
 import { useContent } from './ContentContext';
 
 interface DefaultContentOwnProps<D> {}
+
 export type DefaultContentProps<D> = PropsWithChildren<
   DefaultContentOwnProps<D>
 >;
 
+/**
+ * Displays the value of cell as it is.
+ */
 export function DefaultContent<D>(props: DefaultContentProps<D>) {
   const value = useContent<any>();
   return <Fragment>{value}</Fragment>;

src/data/DataTable.tsx

@@ -9,7 +9,35 @@ interface DataTableOwnProps<D> {
 }
 
 export type DataTableProps<D> = PropsWithChildren<DataTableOwnProps<D>>;
-
+/**
+ * Root component of `ctablex`. Provides its children with `DataContext` and `ColumnContext`
+ *
+ * @param props.data - data to be displayed by table
+ *
+ * @example
+ * <DataTable data={data}>
+ *  <Columns>
+ *    <Column header="Name" accessor="name">
+ *      <StringCell />
+ *    </Column>
+ *    <Column header="Price" accessor="price">
+ *      <NumberCell />
+ *    </Column>
+ *    <Column header="Color" accessor="color">
+ *      <StringCell />
+ *    </Column>
+ *  </Columns>
+ *  <Table>
+ *    <TableHeader />
+ *    <TableBody>
+ *      <Rows>
+ *        <Row />
+ *      </Rows>
+ *    </TableBody>
+ *  </Table>
+ *</DataTable>
+ *
+ */
 export function DataTable<D>(props: DataTableProps<D>) {
   const { children } = props;
   const columns = findColumns(children);

src/header/HeaderCell.tsx

@@ -7,6 +7,11 @@ interface HeaderCellOwnProps {
 
 export type HeaderCellProps = PropsWithChildren<HeaderCellOwnProps>;
 
+/**
+ * Wraps `header` component with the componrnt for `th`
+ *
+ * @param props.header - header/title for column
+ */
 export function HeaderCell(props: HeaderCellProps) {
   const Components = useTableComponentsContext();
 

src/header/TableHeader.tsx

@@ -6,6 +6,9 @@ interface TableHeaderOwnProps {}
 
 export type TableHeaderProps = PropsWithChildren<TableHeaderOwnProps>;
 
+/**
+ * Wraps columns with the component for `thead`.
+ */
 export function TableHeader(props: TableHeaderProps) {
   const { children } = props;
   const Components = useTableComponentsContext();

src/row/Row.tsx

@@ -10,6 +10,11 @@ interface RowOwnProps<D> {
 
 export type RowProps<D> = PropsWithChildren<RowOwnProps<D>>;
 
+/**
+ * Wraps `columns` with the component for `tr` and provides `RowDataContext`
+ *
+ * @param props.row - Provide `row` prop for custom rows
+ */
 export function Row<D>(props: RowProps<D>) {
   const Components = useTableComponentsContext();
 

src/row/Rows.tsx

@@ -11,6 +11,12 @@ interface RowsOwnProps<D> {
 
 export type RowsProps<D> = PropsWithChildren<RowsOwnProps<D>>;
 
+/**
+ * Iterates over `data` and renders `children` for each one of them, using `ArrayOutput`.
+ *
+ * @param props.keyAccessor - Specifies `id` for `ArrayOutput` iteration.
+ * @param props.data - `data` for rendering custom rows.
+ */
 export function Rows<D>(props: RowsProps<D>) {
   const { children, keyAccessor } = props;
   const data = useData<D>(props.data);

src/table/Table.tsx

@@ -5,6 +5,9 @@ interface TableOwnProps {}
 
 export type TableProps = PropsWithChildren<TableOwnProps>;
 
+/**
+ * Wraps its `children` with the component for `table`.
+ */
 export function Table(props: TableProps) {
   const { children } = props;
   const Components = useTableComponentsContext();

src/table/TableBody.tsx

@@ -6,6 +6,9 @@ interface TableBodyOwnProps<D> {}
 
 export type TableBodyProps<D> = PropsWithChildren<TableBodyOwnProps<D>>;
 
+/**
+ * Wraps its `children` with the component for `tbody`.
+ */
 export function TableBody<D>(props: TableBodyProps<D>) {
   const { children } = props;
   const Components = useTableComponentsContext();

src/table/TablePartContext.tsx

@@ -7,6 +7,12 @@ import React, {
 
 export type TablePartType = 'definition' | 'header' | 'body' | string;
 export type TablePartContextType = TablePartType;
+
+/**
+ * - `'header'` indicates we are inside of `TableHeader` component.
+ * - `'body'` indicates we are inside of `TableBody` component.
+ * - `'definition'` indicates we are inside of `DataTable` but outside of aforementioned parts.
+ */
 export const TablePartContext: Context<
   TablePartContextType | undefined
 > = createContext<TablePartContextType | undefined>(undefined);