leafygreen-ui/packages/table at main · mongodb/leafygreen-ui · GitHub

 const table = useLeafyGreenTable<Person>({
   containerRef: tableContainerRef,
   data,
   columns,
   state: {
     rowSelection,
   },
   onRowSelectionChange: setRowSelection,
   hasSelectableRows: true,
 });
 export type LGTableDataType<T extends LGRowData> = T & {
   renderExpandedContent?: (row: LeafyGreenTableRow<T>) => JSX.Element;
   subRows?: Array<LGTableDataType<T>>;
 };
 export type LGTableDataType<T extends LGRowData> = T & {
   renderExpandedContent?: (row: LeafyGreenTableRow<T>) => JSX.Element;
   subRows?: Array<LGTableDataType<T>>;
 };
 <Table
   {...args}
   table={table}
   ref={tableContainerRef}
   className={virtualScrollingContainerHeight}
 >
   <TableHead>
     {table.getHeaderGroups().map((headerGroup: HeaderGroup<Person>) => (
       <HeaderRow key={headerGroup.id}>
         {headerGroup.headers.map(header => {
           return (
             <HeaderCell key={header.id} header={header}>
               {flexRender(
                 header.column.columnDef.header,
                 header.getContext(),
               )}
             </HeaderCell>
           );
         })}
       </HeaderRow>
     ))}
   </TableHead>
   <TableBody>
     {table.virtualRows &&
       table.virtualRows.map((virtualRow: VirtualItem) => {
         const row = rows[virtualRow.index];
         const cells = row.getVisibleCells();
         return (
           <Row key={row.id}>
             {cells.map((cell: LeafyGreenTableCell<Person>) => {
               return (
                 <Cell key={cell.id}>
                   {flexRender(
                     cell.column.columnDef.cell,
                     cell.getContext(),
                   )}
                 </Cell>
               );
             })}
           </Row>
         );
       })}
   </TableBody>
 </Table>
 const columns = React.useMemo<Array<ColumnDef<Person>>>(
   () => [
     {
       accessorKey: 'id',
       header: 'ID',
       size: 60,
     },
 const table = useLeafygreenTable<Person>({
   containerRef: tableContainerRef,
   data,
   columns,
   state: {
     rowSelection,
   },
   onRowSelectionChange: setRowSelection,
   hasSelectableRows: true,
   getCoreRowModel: getCoreRowModel(),
 });
Name		Name	Last commit message	Last commit date
parent directory ..
src		src
.eslintrc.js		.eslintrc.js
CHANGELOG.md		CHANGELOG.md
README.md		README.md
UPGRADE.md		UPGRADE.md
package.json		package.json
tsconfig.json		tsconfig.json
	const table = useLeafyGreenTable<Person>({
	containerRef: tableContainerRef,
	data,
	columns,
	state: {
	rowSelection,
	},
	onRowSelectionChange: setRowSelection,
	hasSelectableRows: true,
	});
	export type LGTableDataType<T extends LGRowData> = T & {
	renderExpandedContent?: (row: LeafyGreenTableRow<T>) => JSX.Element;
	subRows?: Array<LGTableDataType<T>>;
	};
Name	Description	Type	Default
`shouldAlternateRowColor`	Determines whether alternating rows will have dark backgrounds	boolean	false
`disableAnimations`	Disables all transition animations for smoother rendering of tall content where appropriate	boolean	false
`baseFontSize`	The base font size of the title and text rendered in children	13 \| 16	13
`darkMode`	Render the component in dark mode.	boolean	false
Name	Description	Type	Default
sortState	Determines the current sorting direction.	`SortState`	`'asc' 'desc' 'off' 'none'`
header	`Header` object returned from the `useLeafygreenTable` hook.	Header<T, any>	-
Name	Description	Type	Default
disabled	Determines whether the row is disabled	`boolean`	`false`
row	Row object passed from the `useLeafygreenTable` hook.	`LeafygreenTableRow<T>`	-
virtualRow	Virtual row object passed from the `useLeafygreenTable` hook.	`VirtualItem`	-
	<Table
	{...args}
	table={table}
	ref={tableContainerRef}
	className={virtualScrollingContainerHeight}
	>
	<TableHead>
	{table.getHeaderGroups().map((headerGroup: HeaderGroup<Person>) => (
	<HeaderRow key={headerGroup.id}>
	{headerGroup.headers.map(header => {
	return (
	<HeaderCell key={header.id} header={header}>
	{flexRender(
	header.column.columnDef.header,
	header.getContext(),
	)}
	</HeaderCell>
	);
	})}
	</HeaderRow>
	))}
	</TableHead>
	<TableBody>
	{table.virtualRows &&
	table.virtualRows.map((virtualRow: VirtualItem) => {
	const row = rows[virtualRow.index];
	const cells = row.getVisibleCells();
	return (
	<Row key={row.id}>
	{cells.map((cell: LeafyGreenTableCell<Person>) => {
	return (
	<Cell key={cell.id}>
	{flexRender(
	cell.column.columnDef.cell,
	cell.getContext(),
	)}
	</Cell>
	);
	})}
	</Row>
	);
	})}
	</TableBody>
	</Table>
	const columns = React.useMemo<Array<ColumnDef<Person>>>(
	() => [
	{
	accessorKey: 'id',
	header: 'ID',
	size: 60,
	},
Util	Description	Returns
`getTable()`	Returns the table node or `null` if the table node is not found.	`HTMLTableElement`
`getAllHeaders()`	Returns an array of `<th>`(`<HeaderCell>`) in the DOM. Throws if there are no elements.	`Array<HTMLTableCellElement>`
`getHeaderByIndex(index: number)`	Returns utils for an individual `<th>`(`<HeaderCell>`) in the DOM	`HeaderUtils` \| `null`
`getSelectAllCheckbox()`	Returns the input node for the select all checkbox or `null`	`HTMLInputElement` \| `null`
`getAllVisibleRows()`	Returns an array of all visible `<tr>`(`<Row>`) in the DOM. Throws if there are no elements.	`Array<HTMLTableRowElement>`
`getRowByIndex(index: number)`	Returns utils for an indivudial `<tr>`(`<Row>`) in the DOM	`RowUtils` \| `null`
`getAllVisibleSelectedRows`	Returns an array of all visible selected `<tr>`(`<Row>`) in the DOM	`Array<HTMLTableRowElement>`
HeaderUtils	Description	Returns
`getElement()`	Returns the `<th>` element	`HTMLTableCellElement`
`getSortIcon()`	Returns the sort button or `null`	`HTMLButtonElement` \| `null`