envoc-table / Exports
[![Travis][build-badge]][build]
Describe envoc-table here.
Important naming conventions for our sanity while creating envoc-table types:
- TSource = The data source of the table. e.g. an instance of DataSource<TRow, TParams, TData>, which is basically just a function returning data in a known shape
- TRow = The shape of the data representing an individual row in the table. e.g. 'UserListItemDto' - can be referenced via GetRowType<TSource>
- TParams = The extra parameters that can be sent to the server as part of the request for data, but not part of the DataTablePage request. e.g. UserFiltersDto - can be referenced via GetParamType<TSource>
- TData = The entire data object that is returned by the DataSource, generally including all the data relevant to the request but may also include extra info for custom types. e.g. PagedUserListResultDto e.g. DataPageResult<UserListItemDto>
In general you create a TableContext and use the children to render whatever is needed.
It is important to note the usage of tanstack table is intended to be an implementation detail. The envoc-table types provide sufficient ways to deal with requirements. Should you need extra functionality for the table not included, it is recommended to make a custom TanstackTable equivalent to serve your needs. Specifically trying to keep the tanstack table types isolated to the tanstack specific components to avoid issues. In the past, breaking changes to react-table have been a pain so the minimizing the places to change should minimize headaches.
envoc-table / Exports / ApiResult
The common shape of a mediated result returned from Envoc.Core
Name |
---|
TResult |
• Optional
result: TResult
TableProvider.tsx:31
envoc-table / Exports / CellProps
• Optional
className: string
Cells/Cell.tsx:6
• Optional
style: CSSProperties
Cells/Cell.tsx:8
• Optional
title: string
Cells/Cell.tsx:7
• Optional
value: ReactNode
Cells/Cell.tsx:5
envoc-table / Exports / ColumnsBuilderProps
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
• Column: SingleColumnBuilderType
<TSource
, TRow
, TParams
, TData
>
A single column in the table, could represent some specific value via the 'accessorKey' prop
The 'Cell' prop should render the value for a particular column
Columns/ColumnsBuilder.tsx:28
• ServerColumns: ServerColumnsBuilderType
<TSource
, TRow
, TParams
, TData
>
Allows for server provided columns to be rendered with the default (server side) configurations
Columns/ColumnsBuilder.tsx:33
envoc-table / Exports / CommaSeparatedCellProps
-
Omit
<CellProps
,"value"
>↳
CommaSeparatedCellProps
• Optional
className: string
Omit.className
Cells/Cell.tsx:6
• Optional
style: CSSProperties
Omit.style
Cells/Cell.tsx:8
• Optional
title: string
Omit.title
Cells/Cell.tsx:7
• Optional
value: null
| string
[] | number
[]
Cells/CommaSeparatedCell.tsx:5
envoc-table / Exports / CommonColumnConfigProps
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
• Optional
Footer: string
| ElementType
<FooterComponentProps
<TSource
, TRow
, TParams
, TData
>>
footer for the column
Columns/CommonColumnConfigProps.ts:24
• Optional
Header: string
| ElementType
<HeaderComponentProps
<TSource
, TRow
, TParams
, TData
>>
header for the column
Columns/CommonColumnConfigProps.ts:18
• Optional
width: number
width for this column in pixels
Columns/CommonColumnConfigProps.ts:29
envoc-table / Exports / CommonTableFilterProps
• Optional
keepPage: boolean
Filters/TableFilterBuilder.tsx:46
envoc-table / Exports / DataTableColumnDefinition
The common shape of a column config returned from our Envoc.Core table response
• Optional
accessor: string
TableProvider.tsx:51
• Optional
componentAttribute: Object
Name | Type |
---|---|
name |
string |
TableProvider.tsx:56
• Optional
filterable: boolean
TableProvider.tsx:54
• Optional
header: string
TableProvider.tsx:52
• Optional
sortable: boolean
TableProvider.tsx:53
• Optional
type: string
TableProvider.tsx:55
envoc-table / Exports / DateCellProps
-
Omit
<CellProps
,"value"
>↳
DateCellProps
• Optional
className: string
Omit.className
Cells/Cell.tsx:6
• Optional
displayFormat: DisplayFormats
Cells/DateCell.tsx:9
• Optional
style: CSSProperties
Omit.style
Cells/Cell.tsx:8
• Optional
title: string
Omit.title
Cells/Cell.tsx:7
• Optional
value: null
| string
Cells/DateCell.tsx:8
envoc-table / Exports / DateTimeZoneCellProps
-
Omit
<CellProps
,"value"
>↳
DateTimeZoneCellProps
• Optional
className: string
Omit.className
Cells/Cell.tsx:6
• Optional
dateDisplayFormat: DateDisplayFormats
Cells/DateTimeZoneCell.tsx:32
• Optional
style: CSSProperties
Omit.style
Cells/Cell.tsx:8
• Optional
timeDisplayFormat: "short"
Cells/DateTimeZoneCell.tsx:33
• Optional
timeZoneNameDisplayFormat: DimeZoneNameDisplayFormats
Cells/DateTimeZoneCell.tsx:34
• Optional
title: string
Omit.title
Cells/Cell.tsx:7
• Optional
value: null
| string
Cells/DateTimeZoneCell.tsx:31
envoc-table / Exports / DollarCellProps
-
Omit
<CellProps
,"value"
>↳
DollarCellProps
• Optional
className: string
Omit.className
Cells/Cell.tsx:6
• Optional
style: CSSProperties
Omit.style
Cells/Cell.tsx:8
• Optional
title: string
Omit.title
Cells/Cell.tsx:7
• Optional
value: null
| string
| number
Cells/DollarCell.tsx:11
envoc-table / Exports / FormattedPhoneNumberCellProps
-
Omit
<CellProps
,"value"
>↳
FormattedPhoneNumberCellProps
• Optional
className: string
Omit.className
Cells/Cell.tsx:6
• Optional
style: CSSProperties
Omit.style
Cells/Cell.tsx:8
• Optional
title: string
Omit.title
Cells/Cell.tsx:7
• Optional
value: null
| string
Cells/FormattedPhoneNumberCell.tsx:6
envoc-table / Exports / NaCellProps
• Optional
allowEmptyString: boolean
Cells/NaCell.tsx:9
• Optional
className: string
Cells/NaCell.tsx:6
• Optional
style: CSSProperties
Cells/NaCell.tsx:8
• Optional
title: string
Cells/NaCell.tsx:7
• Optional
value: ReactNode
Cells/NaCell.tsx:5
envoc-table / Exports / NaDateCellProps
-
↳
NaDateCellProps
• Optional
allowEmptyString: boolean
Cells/NaDateCell.tsx:5
• Optional
className: string
Cells/Cell.tsx:6
• Optional
displayFormat: DisplayFormats
Cells/DateCell.tsx:9
• Optional
style: CSSProperties
Cells/Cell.tsx:8
• Optional
title: string
Cells/Cell.tsx:7
• Optional
value: null
| string
Cells/DateCell.tsx:8
envoc-table / Exports / NaDateTimeZoneCellProps
-
↳
NaDateTimeZoneCellProps
- allowEmptyString
- className
- dateDisplayFormat
- style
- timeDisplayFormat
- timeZoneNameDisplayFormat
- title
- value
• Optional
allowEmptyString: boolean
Cells/NaDateTimeZoneCell.tsx:6
• Optional
className: string
DateTimeZoneCellProps.className
Cells/Cell.tsx:6
• Optional
dateDisplayFormat: DateDisplayFormats
DateTimeZoneCellProps.dateDisplayFormat
Cells/DateTimeZoneCell.tsx:32
• Optional
style: CSSProperties
Cells/Cell.tsx:8
• Optional
timeDisplayFormat: "short"
DateTimeZoneCellProps.timeDisplayFormat
Cells/DateTimeZoneCell.tsx:33
• Optional
timeZoneNameDisplayFormat: DimeZoneNameDisplayFormats
DateTimeZoneCellProps.timeZoneNameDisplayFormat
Cells/DateTimeZoneCell.tsx:34
• Optional
title: string
Cells/Cell.tsx:7
• Optional
value: null
| string
Cells/DateTimeZoneCell.tsx:31
envoc-table / Exports / RenderCellProps
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
• Cell: ElementType
<any
>
Arbitrary component that is expected to take either a RowCellComponentProps or ValueCellComponentProps
Usage of RenderCell cannot know which case is true so we assume it is one of those - hopefully that remains a library code concern
Cells/RenderCell.tsx:23
• cellProps: RowCellComponentProps
<TSource
, TRow
, TParams
, TData
>
we use the less specific RowCellComponentProps here because RenderCell will interrogate the configuration of the column to determine the proper setup
Cells/RenderCell.tsx:28
envoc-table / Exports / RenderFooterProps
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
• Footer: ElementType
<any
>
Footers/RenderFooter.tsx:17
• footerProps: FooterComponentProps
<TSource
, TRow
, TParams
, TData
>
Footers/RenderFooter.tsx:18
envoc-table / Exports / RenderHeaderProps
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
• Header: ElementType
<any
>
Headers/RenderHeader.tsx:17
• headerProps: HeaderComponentProps
<TSource
, TRow
, TParams
, TData
>
Headers/RenderHeader.tsx:18
envoc-table / Exports / ServerColumnsBuilderProps
Defines the columns configured
note: not all columns may have a ColumnDefinition on the server or they may be ignored
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
• Optional
except: keyof TRow
[]
exclude the given columns
Columns/ServerColumnsBuilder.tsx:43
envoc-table / Exports / SimplePagerProps
• Optional
className: string
Paging/SimplePager.tsx:16
• Optional
defaultSize: number
Paging/SimplePager.tsx:14
• Optional
defaultSizes: number
[]
Paging/SimplePager.tsx:15
envoc-table / Exports / TableContextProp
represents any prop that should get the 'context' of the wrapping table provider
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
• context: TableContextType
<TSource
, TRow
, TParams
, TData
>
TableContextProp.tsx:18
envoc-table / Exports / TableFilterComponentProps
The actual 'input' that has the controlling values to a table filter. duck-types to 'InjectedFieldProps' in envoc-form
Name |
---|
TParams |
TValue |
• input: TableFilterInputComponentProps
<undefined
| null
| TValue
>
Filters/TableFilterComponentProps.tsx:7
• Optional
meta: any
Filters/TableFilterComponentProps.tsx:8
• Optional
params: null
| TParams
Filters/TableFilterComponentProps.tsx:6
envoc-table / Exports / TableFilterInputComponentProps
Effectively, just a fancy way of what a normal 'input' element might accept. Conveniently duck-types to 'CustomFieldInputProps' in envoc-form Has lesser features than what's in envoc-form
Name |
---|
TValue |
• onChange: (newValue
: TValue
) => void
▸ (newValue
): void
Name | Type |
---|---|
newValue |
TValue |
void
Filters/TableFilterComponentProps.tsx:18
• value: TValue
Filters/TableFilterComponentProps.tsx:17
envoc-table / Exports / TanstackTableCellProps
• cellProps: CellContext
<any
, any
>
Tables/TanstackTableCell.tsx:12
• columnId: string
Tables/TanstackTableCell.tsx:11
envoc-table / Exports / TanstackTableFooterProps
• columnId: string
Tables/TanstackTableFooter.tsx:10
envoc-table / Exports / TanstackTableHeaderProps
• columnId: string
Tables/TanstackTableHeader.tsx:10
envoc-table / Exports / YesNoCellProps
-
Omit
<CellProps
,"value"
>↳
YesNoCellProps
• Optional
className: string
Omit.className
Cells/Cell.tsx:6
• Optional
style: CSSProperties
Omit.style
Cells/Cell.tsx:8
• Optional
title: string
Omit.title
Cells/Cell.tsx:7
• Optional
value: null
| string
| boolean
Cells/YesNoCell.tsx:5
envoc-table / Exports
- ApiResult
- CellProps
- ColumnsBuilderProps
- CommaSeparatedCellProps
- CommonColumnConfigProps
- CommonTableFilterProps
- DataTableColumnDefinition
- DateCellProps
- DateTimeZoneCellProps
- DollarCellProps
- FormattedPhoneNumberCellProps
- NaCellProps
- NaDateCellProps
- NaDateTimeZoneCellProps
- RenderCellProps
- RenderFooterProps
- RenderHeaderProps
- ServerColumnsBuilderProps
- SimplePagerProps
- TableContextProp
- TableFilterComponentProps
- TableFilterInputComponentProps
- TanstackTableCellProps
- TanstackTableFooterProps
- TanstackTableHeaderProps
- YesNoCellProps
- BuilderComponentHelperProps
- ColumnConfiguration
- ColumnConfigurationLookup
- ColumnOrderLookup
- ColumnsBuilderType
- DataSource
- DataSourceRequestParams
- DataTablePage
- DateDisplayFormats
- DimeDisplayFormats
- DimeZoneNameDisplayFormats
- DisplayFormats
- FooterComponentProps
- GetParamType
- GetRowType
- GetServiceResultType
- HeaderComponentProps
- Mix
- PartialInheritance
- RowCellComponentProps
- ServerColumnsBuilderType
- SingleColumnBuilderProps
- SingleColumnBuilderType
- SinglePropBuilderComponentHelperProps
- TableBuilderProps
- TableBuilderType
- TableCellLookup
- TableContextType
- TableFilterBuilderProps
- TableFilterBuilderType
- TablePaginationBuilderProps
- TablePaginationBuilderType
- TableProviderBuilder
- TableProviderBuilderProps
- TableProviderProps
- TableState
- TableStateColumn
- ValueCellComponentProps
- BuilderComponentHelper
- Cell
- CommaSeparatedCell
- DateCell
- DateTimeZoneCell
- DollarCell
- FormattedPhoneNumberCell
- NaCell
- NaDateCell
- NaDateTimeZoneCell
- RenderCell
- RenderFooter
- RenderHeader
- ServerColumnsBuilder
- SimplePager
- SingleColumnBuilder
- SinglePropBuilderComponentHelper
- TableBuilder
- TableFilterBuilder
- TablePaginationBuilder
- TableProvider
- TanstackTable
- TanstackTableCell
- TanstackTableFooter
- TanstackTableHeader
- YesNoCell
- configureTableCells
- defaultGetRowId
- useTableContext
Ƭ BuilderComponentHelperProps<componentName
, TBaseProps
, TRenderComponent
, TRenderComponentProps
, TConsumerCommonProps
>: { [P in componentName]: PartialInheritance<TBaseProps, TRenderComponent, TRenderComponentProps, TConsumerCommonProps> } & Omit
<TRenderComponentProps
, keyof TBaseProps
> & TConsumerCommonProps
Allows some 'Component' to be given as a prop and have it rendered with some set of TBaseProps and TConsumerCommonProps be enforced by type
Name | Type | Description |
---|---|---|
componentName |
extends string
|
The prop name to be used by the builder to identify 'Component' |
TBaseProps |
TBaseProps |
props shared between any instance of 'Component' within the builder |
TRenderComponent |
extends ElementType
|
the type of the react component that should be doing the actual rendering |
TRenderComponentProps |
ComponentPropsWithRef <TRenderComponent > |
if provided, allows for a custom value for the expected TRenderComponent props type |
TConsumerCommonProps |
unknown |
the shared props that any instance of this component that should be provided by the consumer |
Builders.tsx:21
Ƭ ColumnConfiguration<TSource
, TRow
, TParams
, TData
>: Object
the specific configuration of a column by it's id
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type | Description |
---|---|---|
accessorKey? |
keyof TRow
|
- |
cellComponent |
FunctionComponent <RowCellComponentProps <TSource , TRow , TParams , TData >> |
- |
columnId |
string |
- |
columnValueFunction |
(row : TRow ) => any
|
get the value from a row that this column primarily represents |
footerComponent? |
FunctionComponent <FooterComponentProps <TSource , TRow , TParams , TData >> |
- |
headerComponent? |
FunctionComponent <HeaderComponentProps <TSource , TRow , TParams , TData >> |
- |
sortBy? |
string | keyof TRow
|
what this column should sort by - might be a property of TRow or a property expression like "foo.bar" |
width? |
number |
desired width of the column in pixels |
TableProvider.tsx:170
Ƭ ColumnConfigurationLookup<TSource
, TRow
, TParams
, TData
>: Object
The configuration for some column by a column id
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
▪ [columnId: string
]: ColumnConfiguration
<TSource
, TRow
, TParams
, TData
>
TableProvider.tsx:207
Ƭ ColumnOrderLookup: Object
Numeric ordering of columns by id. Generally expected to be ascending order.
This is kept distinct from column configuration as columns may be conditionally rendered. Keeping it in the same state object caused more unmounts / remounts than desired
▪ [columnId: string
]: number
TableProvider.tsx:223
Ƭ ColumnsBuilderType<TSource
, TRow
, TParams
, TData
>: (x
: ColumnsBuilderProps
<TSource
, TRow
, TParams
, TData
>) => JSX.Element
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
▸ (x
): JSX.Element
Name | Type |
---|---|
x |
ColumnsBuilderProps <TSource , TRow , TParams , TData > |
JSX.Element
Columns/ColumnsBuilder.tsx:10
Ƭ DataSource<TRow
, TParams
, TData
>: (value
: DataSourceRequestParams
<TParams
>) => Promise
<TData
> & (value
: DataSourceRequestParams
<TParams
>) => Promise
<ApiResult
<DataTablePage
<TRow
>>>
A source of data represented by a function accepting a set of useful parameters that returns a promise to the commonly used api result + paged data
Name |
---|
TRow |
TParams |
TData |
TableProvider.tsx:136
Ƭ DataSourceRequestParams<TParams
>: Object
Common parameters passed to a data source
Name |
---|
TParams |
Name | Type |
---|---|
params? |
TParams |
signal |
AbortSignal |
state |
TableState |
TableProvider.tsx:84
Ƭ DataTablePage<TRow
>: Object
The common shape of a "paged" source of data returned from our Envoc.Core table response
Represents DataTableFuzzyPage + DataTablePage + DataTablePageWithColumns from Envoc.Core (namespace Envoc.Core.Queries.Datatables.Client)
Name |
---|
TRow |
Name | Type |
---|---|
columns? |
DataTableColumnDefinition [] |
hasMoreData? |
boolean |
rows? |
TRow [] |
totalFilteredRecords? |
number |
totalRecords? |
number |
TableProvider.tsx:39
Ƭ DateDisplayFormats: "short"
| "full"
| "medium"
| "long"
Cells/DateTimeZoneCell.tsx:20
Ƭ DimeDisplayFormats: "short"
Cells/DateTimeZoneCell.tsx:24
Ƭ DimeZoneNameDisplayFormats: "long"
| "short"
Cells/DateTimeZoneCell.tsx:28
Ƭ DisplayFormats: "short"
| "full"
| "medium"
| "long"
Cells/DateCell.tsx:5
Ƭ FooterComponentProps<TSource
, TRow
, TParams
, TData
>: Object
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
columnId |
string |
data |
TData | undefined
|
params |
TParams | undefined
|
Columns/CommonColumnConfigProps.ts:43
Ƭ GetParamType<TSource
>: TSource
extends DataSource
<infer _TRow, infer TParams, infer _TData> ? TParams
: never
Gets the parameter type from a data source
Name |
---|
TSource |
TableProvider.tsx:108
Ƭ GetRowType<TSource
>: TSource
extends DataSource
<infer TRow, infer _TParams, infer _TData> ? TRow
: never
Gets the actual "row" type from a data source
Name |
---|
TSource |
TableProvider.tsx:93
Ƭ GetServiceResultType<TSource
>: TSource
extends DataSource
<infer TRow, infer _TParams, infer TData> ? TData
& ApiResult
<DataTablePage
<TRow
>> : never
Gets the type of data from a data source
Name |
---|
TSource |
TableProvider.tsx:123
Ƭ HeaderComponentProps<TSource
, TRow
, TParams
, TData
>: Object
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
columnId |
string |
data |
TData | undefined
|
params |
TParams | undefined
|
Columns/CommonColumnConfigProps.ts:32
Ƭ Mix<A
, B
>: { [K in keyof B | keyof A]: K extends keyof A ? A[K] : K extends keyof B ? B[K] : never }
used to combine A and B, with keys of A taking priority over keys of B
Name |
---|
A |
B |
Builders.tsx:155
Ƭ PartialInheritance<TBaseProps
, TRenderComponent
, TRenderComponentProps
, TConsumerCommonProps
>: Partial
<TRenderComponentProps
> extends Partial
<Mix
<TBaseProps
, TConsumerCommonProps
>> ? TRenderComponent
: ComponentType
<Mix
<Mix
<TBaseProps
, TConsumerCommonProps
>, ComponentProps
<TRenderComponent
>>>
We want to support both generic and inheritance type relationships between components passed in to builders e.g. we have some components with generic parameters - those should allow the generics to be set correctly e.g. other cases we have base component (props) that cover our cases
This mess of a utility type allows for either situation behave in a way that is intuitive to consuming developers
Name | Type |
---|---|
TBaseProps |
TBaseProps |
TRenderComponent |
extends ElementType
|
TRenderComponentProps |
TRenderComponentProps |
TConsumerCommonProps |
TConsumerCommonProps |
Builders.tsx:138
Ƭ RowCellComponentProps<TSource
, TRow
, TParams
, TData
>: Object
Props given to some cell without a particular target 'value' in mind
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
columnId |
string |
data |
TData | undefined | null
|
params |
TParams | undefined | null
|
row |
TRow |
Cells/RowCellComponentProps.tsx:11
Ƭ ServerColumnsBuilderType<TSource
, TRow
, TParams
, TData
>: (props
: ServerColumnsBuilderProps
<TSource
, TRow
, TParams
, TData
>) => JSX.Element
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
▸ (props
): JSX.Element
Renders many columns dependent on the server based configuration
The configuration of those columns comes from Envoc.Core ColumnDefinition (namespace Envoc.Core.Queries.Datatables.Client)
Name | Type |
---|---|
props |
ServerColumnsBuilderProps <TSource , TRow , TParams , TData > |
JSX.Element
Columns/ServerColumnsBuilder.tsx:20
Ƭ SingleColumnBuilderProps<TProp
, TRenderComponent
, TSource
, TRow
, TParams
, TData
>: TProp
extends keyof TRow
? SinglePropBuilderComponentHelperProps
<"accessorKey"
, "Cell"
, ValueCellComponentProps
<TRow
[TProp
], TSource
, TRow
, TParams
, TData
>, TRow
, TProp
, TRenderComponent
, ComponentPropsWithoutRef
<TRenderComponent
>, CommonColumnConfigProps
<TSource
, TRow
, TParams
, TData
>> & { accessorKey
: TProp
} & { enableSorting?
: false
; sortExpression?
: undefined
; sortProperty?
: undefined
} | { enableSorting
: true
; sortExpression?
: string
; sortProperty?
: keyof TRow
} : BuilderComponentHelperProps
<"Cell"
, RowCellComponentProps
<TSource
, TRow
, TParams
, TData
>, TRenderComponent
, ComponentPropsWithoutRef
<TRenderComponent
>, CommonColumnConfigProps
<TSource
, TRow
, TParams
, TData
>> & { accessorKey?
: never
} & { accessorKey?
: never
; enableSorting?
: false
; sortProperty?
: undefined
} | { enableSorting
: true
; sortProperty
: keyof TRow
}
Name | Type |
---|---|
TProp |
extends keyof TRow | undefined
|
TRenderComponent |
extends ElementType
|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Columns/SingleColumnBuilder.tsx:55
Ƭ SingleColumnBuilderType<TSource
, TRow
, TParams
, TData
>: <TProp, TRenderComponent>(props
: SingleColumnBuilderProps
<TProp
, TRenderComponent
, TSource
, TRow
, TParams
, TData
>) => JSX.Element
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
▸ <TProp
, TRenderComponent
>(props
): JSX.Element
A single column in the table
Name | Type |
---|---|
TProp |
extends keyof TRow | undefined
|
TRenderComponent |
extends ElementType
|
Name | Type |
---|---|
props |
SingleColumnBuilderProps <TProp , TRenderComponent , TSource , TRow , TParams , TData > |
JSX.Element
Columns/SingleColumnBuilder.tsx:36
Ƭ SinglePropBuilderComponentHelperProps<keyName
, componentName
, TBaseProps
, TData
, TProp
, TRenderComponent
, TRenderComponentProps
, TConsumerCommonProps
>: { [P in componentName]: PartialInheritance<TBaseProps, TRenderComponent, TRenderComponentProps, TConsumerCommonProps> } & { [P in keyName]: TProp } & Omit
<TRenderComponentProps
, keyof TBaseProps
> & TConsumerCommonProps
Generically define a type-safe, constrained builder's props This is a generic set of props that allows for a helper to be called like a react component For use in the children as function pattern. Examples being envoc-form and envoc-table
Name | Type | Description |
---|---|---|
keyName |
extends string
|
The prop name to be used by the builder to identify which TProp |
componentName |
extends string
|
The prop name to be used by the builder to identify 'Component' |
TBaseProps |
TBaseProps |
props shared between any instance of 'Component' within the builder |
TData |
TData |
the underlying type that should be inspected |
TProp |
extends keyof TData
|
the property key of the TData that should be 'bound to' |
TRenderComponent |
extends ElementType
|
the type of the react component that should be doing the actual rendering |
TRenderComponentProps |
ComponentPropsWithRef <TRenderComponent > |
if provided, allows for a custom value for the expected TRenderComponent props type |
TConsumerCommonProps |
unknown |
the shared props that any instance of this component that should be provided by the consumer |
Builders.tsx:58
Ƭ TableBuilderProps<TRenderComponent
, TSource
, TRow
, TParams
, TData
>: TRenderComponent
extends ElementType
? BuilderComponentHelperProps
<"Component"
, TableContextProp
<TSource
, TRow
, TParams
, TData
>, TRenderComponent
, ComponentPropsWithoutRef
<TRenderComponent
>> & { children
: ColumnsBuilderType
<TSource
, TRow
, TParams
, TData
> } : { Component?
: undefined
; children
: ColumnsBuilderType
<TSource
, TRow
, TParams
, TData
> ; debugTable?
: boolean
}
Name | Type |
---|---|
TRenderComponent |
extends ElementType | undefined
|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Tables/TableBuilder.tsx:25
Ƭ TableBuilderType<TSource
, TRow
, TParams
, TData
>: <TRenderComponent>(props
: TableBuilderProps
<TRenderComponent
, TSource
, TRow
, TParams
, TData
>) => JSX.Element
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
▸ <TRenderComponent
>(props
): JSX.Element
Name | Type |
---|---|
TRenderComponent |
extends ElementType | undefined
|
Name | Type |
---|---|
props |
TableBuilderProps <TRenderComponent , TSource , TRow , TParams , TData > |
JSX.Element
Tables/TableBuilder.tsx:16
Ƭ TableCellLookup: Object
▪ [key: string
]: ElementType
configureTableCells.tsx:13
Ƭ TableContextType<TSource
, TRow
, TParams
, TData
>: Object
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
columnConfiguration |
ColumnConfigurationLookup <TSource , TRow , TParams , TData > |
columnIds |
string [] |
columnOrder |
ColumnOrderLookup |
data? |
TData |
getRowId? |
(row : TRow , index : number ) => string
|
loading |
boolean |
params |
TParams | undefined
|
setColumnConfiguration |
Dispatch <SetStateAction <ColumnConfigurationLookup <TSource , TRow , TParams , TData >>> |
setColumnIds |
Dispatch <SetStateAction <string []>> |
setColumnOrder |
Dispatch <SetStateAction <ColumnOrderLookup >> |
setParams |
Dispatch <SetStateAction <TParams | undefined >> |
setTableState |
Dispatch <SetStateAction <TableState >> |
tableState |
TableState |
TableProvider.tsx:227
Ƭ TableFilterBuilderProps<TParams
, TProp
, TRenderComponent
>: TProp
extends keyof TParams
? SinglePropBuilderComponentHelperProps
<"name"
, "Component"
, TableFilterComponentProps
<TParams
, TParams
[TProp
]>, TParams
, TProp
, TRenderComponent
> & CommonTableFilterProps
: BuilderComponentHelperProps
<"Component"
, TableFilterComponentProps
<TParams
, TParams
>, TRenderComponent
> & CommonTableFilterProps
Name | Type |
---|---|
TParams |
TParams |
TProp |
extends keyof TParams | undefined
|
TRenderComponent |
extends ElementType
|
Filters/TableFilterBuilder.tsx:24
Ƭ TableFilterBuilderType<TParams
>: <TProp, TRenderComponent>(props
: TableFilterBuilderProps
<TParams
, TProp
, TRenderComponent
>) => JSX.Element
Name |
---|
TParams |
▸ <TProp
, TRenderComponent
>(props
): JSX.Element
Builds a table filter for either a single prop of TParams or the entire value
Name | Type |
---|---|
TProp |
extends keyof TParams | undefined
|
TRenderComponent |
extends ElementType
|
Name | Type |
---|---|
props |
TableFilterBuilderProps <TParams , TProp , TRenderComponent > |
JSX.Element
Filters/TableFilterBuilder.tsx:17
Ƭ TablePaginationBuilderProps<TRenderComponent
, TSource
, TRow
, TParams
, TData
>: TRenderComponent
extends ElementType
? BuilderComponentHelperProps
<"Component"
, TableContextProp
<TSource
, TRow
, TParams
, TData
>, TRenderComponent
, ComponentPropsWithoutRef
<TRenderComponent
>> : { Component?
: undefined
} & SimplePagerProps
Name | Type |
---|---|
TRenderComponent |
TRenderComponent |
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Paging/TablePaginationBuilder.tsx:33
Ƭ TablePaginationBuilderType<TSource
, TRow
, TParams
, TData
>: <TRenderComponent>(props
: TablePaginationBuilderProps
<TRenderComponent
, TSource
, TRow
, TParams
, TData
>) => JSX.Element
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
▸ <TRenderComponent
>(props
): JSX.Element
Table pagination with optional Component override
Defaults to "SimplePager"
Name |
---|
TRenderComponent |
Name | Type |
---|---|
props |
TablePaginationBuilderProps <TRenderComponent , TSource , TRow , TParams , TData > |
JSX.Element
Paging/TablePaginationBuilder.tsx:18
Ƭ TableProviderBuilder<TSource
, TRow
, TParams
, TData
>: (props
: TableProviderBuilderProps
<TSource
, TRow
, TParams
, TData
>) => JSX.Element
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
TRow |
TParams |
TParams |
TData |
TData |
▸ (props
): JSX.Element
Name | Type |
---|---|
props |
TableProviderBuilderProps <TSource , TRow , TParams , TData > |
JSX.Element
TableProvider.tsx:143
Ƭ TableProviderBuilderProps<TSource
, TRow
, TParams
, TData
>: Object
allows for a tables, filters, pagers, etc to be built in a type safe manner from this provider (context) instance
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
Table |
TableBuilderType <TSource , TRow , TParams , TData > |
TableFilter |
TableFilterBuilderType <TParams > |
TablePagination |
TablePaginationBuilderType <TSource , TRow , TParams , TData > |
TableProvider.tsx:287
Ƭ TableProviderProps<TSource
, TRow
, TParams
, TData
>: Object
The provider of table context. Can take options that will be used to define a strongly typed object that will be given to the query and can easily be hooked into filter objects
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
children |
TableProviderBuilder <TSource , TRow , TParams , TData > |
dataSource |
TSource |
getRowId? |
(row : TRow , index : number ) => string
|
TableProvider.tsx:156
Ƭ TableState: Object
Table state passed to a data source
Name | Type |
---|---|
columns |
TableStateColumn [] |
includeColumns |
boolean |
skip? |
number |
take? |
number |
TableProvider.tsx:74
Ƭ TableStateColumn: Object
A single column's state as provided to a data source
Name | Type |
---|---|
columnId |
string |
propertyName |
string |
searchTerm? |
string |
sortDirection? |
"asc" | "desc"
|
TableProvider.tsx:64
Ƭ ValueCellComponentProps<TValue
, TSource
, TRow
, TParams
, TData
>: Object
Props given to some cell intending to render a particular value *
Name | Type |
---|---|
TValue |
TValue |
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
columnId |
string |
data |
TData | undefined | null
|
params |
TParams | undefined | null
|
row |
TRow |
value |
TValue | undefined | null
|
Cells/ValueCellComponentProps.tsx:11
• Const
TableContext: Context
<undefined
| TableContextType
<any
, any
, any
, any
>>
Table context the provide various builder elements with needed information / current table state.
Prefer useTableContext
TableProvider.tsx:261
• Const
tableCellLookups: TableCellLookup
configureTableCells.tsx:15
▸ BuilderComponentHelper<ComponentName
, TBaseProps
, TRenderComponent
, TRenderComponentProps
, TConsumerCommonProps
>(props
): Element
Renders a builder component and ensures full assignment of passed props
Name | Type |
---|---|
ComponentName |
extends string
|
TBaseProps |
TBaseProps |
TRenderComponent |
extends ElementType
|
TRenderComponentProps |
ComponentPropsWithRef <TRenderComponent > |
TConsumerCommonProps |
unknown |
Name | Type |
---|---|
props |
{ [P in string]: PartialInheritance<TBaseProps, TRenderComponent, TRenderComponentProps, TConsumerCommonProps> } & Omit <TRenderComponentProps , keyof TBaseProps > & TConsumerCommonProps & TBaseProps & { componentName : ComponentName } |
Element
Builders.tsx:110
▸ Cell(«destructured»
): Element
Name | Type |
---|---|
«destructured» |
CellProps |
Element
Cells/Cell.tsx:11
▸ CommaSeparatedCell(«destructured»
): Element
Name | Type |
---|---|
«destructured» |
CommaSeparatedCellProps |
Element
Cells/CommaSeparatedCell.tsx:8
▸ DateCell(«destructured»
): Element
Name | Type |
---|---|
«destructured» |
DateCellProps |
Element
Cells/DateCell.tsx:12
▸ DateTimeZoneCell(«destructured»
): Element
Name | Type |
---|---|
«destructured» |
DateTimeZoneCellProps |
Element
Cells/DateTimeZoneCell.tsx:37
▸ DollarCell(«destructured»
): Element
Name | Type |
---|---|
«destructured» |
DollarCellProps |
Element
Cells/DollarCell.tsx:14
▸ FormattedPhoneNumberCell(«destructured»
): Element
Name | Type |
---|---|
«destructured» |
FormattedPhoneNumberCellProps |
Element
Cells/FormattedPhoneNumberCell.tsx:9
▸ NaCell(«destructured»
): Element
Name | Type |
---|---|
«destructured» |
NaCellProps |
Element
Cells/NaCell.tsx:12
▸ NaDateCell(«destructured»
): Element
Name | Type |
---|---|
«destructured» |
NaDateCellProps |
Element
Cells/NaDateCell.tsx:8
▸ NaDateTimeZoneCell(«destructured»
): Element
Name | Type |
---|---|
«destructured» |
NaDateTimeZoneCellProps |
Element
Cells/NaDateTimeZoneCell.tsx:9
▸ RenderCell<TSource
, TRow
, TParams
, TData
>(«destructured»
): null
| Element
Generally used internally to render a particular cell type for a particular row in a table
In the standard case, this is setup by the SingleColumnBuilder and then actually rendered by a TanstackTableCell
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
«destructured» |
RenderCellProps <TSource , TRow , TParams , TData > |
null
| Element
Cells/RenderCell.tsx:36
▸ RenderFooter<TSource
, TRow
, TParams
, TData
>(«destructured»
): null
| Element
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
«destructured» |
RenderFooterProps <TSource , TRow , TParams , TData > |
null
| Element
Footers/RenderFooter.tsx:21
▸ RenderHeader<TSource
, TRow
, TParams
, TData
>(«destructured»
): null
| Element
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
«destructured» |
RenderHeaderProps <TSource , TRow , TParams , TData > |
null
| Element
Headers/RenderHeader.tsx:21
▸ ServerColumnsBuilder<TSource
, TRow
, TParams
, TData
>(«destructured»
): Element
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
«destructured» |
ServerColumnsBuilderProps <TSource , TRow , TParams , TData > |
Element
Columns/ServerColumnsBuilder.tsx:46
▸ SimplePager<TSource
, TRow
, TParams
, TData
>(«destructured»
): Element
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
«destructured» |
SimplePagerProps & TableContextProp <TSource , TRow , TParams , TData > |
Element
Paging/SimplePager.tsx:19
▸ SingleColumnBuilder<TProp
, TRenderComponent
, TSource
, TRow
, TParams
, TData
>(props
): Element
Name | Type |
---|---|
TProp |
extends undefined | string | number | symbol
|
TRenderComponent |
extends ElementType
|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
props |
SingleColumnBuilderProps <TProp , TRenderComponent , TSource , TRow , TParams , TData > |
Element
Columns/SingleColumnBuilder.tsx:132
▸ SinglePropBuilderComponentHelper<keyName
, ComponentName
, TBaseProps
, TData
, TProp
, TRenderComponent
, TRenderComponentProps
, TConsumerCommonProps
>(props
): Element
Renders a builder component and ensures full assignment of passed props
Name | Type |
---|---|
keyName |
extends string
|
ComponentName |
extends string
|
TBaseProps |
TBaseProps |
TData |
TData |
TProp |
extends string | number | symbol
|
TRenderComponent |
extends ElementType
|
TRenderComponentProps |
ComponentPropsWithRef <TRenderComponent > |
TConsumerCommonProps |
unknown |
Name | Type |
---|---|
props |
{ [P in string]: PartialInheritance<TBaseProps, TRenderComponent, TRenderComponentProps, TConsumerCommonProps> } & { [P in string]: TProp } & Omit <TRenderComponentProps , keyof TBaseProps > & TConsumerCommonProps & TBaseProps & { componentName : ComponentName } |
Element
Builders.tsx:80
▸ TableBuilder<TRenderComponent
, TSource
, TRow
, TParams
, TData
>(props
): Element
Name | Type |
---|---|
TRenderComponent |
extends undefined | ElementType
|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
props |
TableBuilderProps <TRenderComponent , TSource , TRow , TParams , TData > |
Element
Tables/TableBuilder.tsx:46
▸ TableFilterBuilder<TParams
, TProp
, TRenderComponent
>(props
): Element
Name | Type |
---|---|
TParams |
TParams |
TProp |
extends undefined | string | number | symbol
|
TRenderComponent |
extends ElementType
|
Name | Type |
---|---|
props |
TableFilterBuilderProps <TParams , TProp , TRenderComponent > |
Element
Filters/TableFilterBuilder.tsx:49
▸ TablePaginationBuilder<TRenderComponent
, TSource
, TRow
, TParams
, TData
>(props
): Element
Name | Type |
---|---|
TRenderComponent |
TRenderComponent |
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
props |
TablePaginationBuilderProps <TRenderComponent , TSource , TRow , TParams , TData > |
Element
Paging/TablePaginationBuilder.tsx:50
▸ TableProvider<TSource
, TRow
, TParams
, TData
>(«destructured»
): Element
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
«destructured» |
TableProviderProps <TSource , TRow , TParams , TData > |
Element
TableProvider.tsx:318
▸ TanstackTable<TSource
, TRow
, TParams
, TData
>(«destructured»
): Element
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
«destructured» |
TableContextProp <TSource , TRow , TParams , TData > & { debugTable? : boolean } |
Element
Tables/TanstackTable.tsx:47
▸ TanstackTableCell<TSource
, TRow
, TParams
, TData
>(«destructured»
): null
| Element
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
«destructured» |
TanstackTableCellProps |
null
| Element
Tables/TanstackTableCell.tsx:15
▸ TanstackTableFooter<TSource
, TRow
, TParams
, TData
>(«destructured»
): null
| Element
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
«destructured» |
TanstackTableFooterProps |
null
| Element
Tables/TanstackTableFooter.tsx:13
▸ TanstackTableHeader<TSource
, TRow
, TParams
, TData
>(«destructured»
): null
| Element
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
Name | Type |
---|---|
«destructured» |
TanstackTableHeaderProps |
null
| Element
Tables/TanstackTableHeader.tsx:13
▸ YesNoCell(«destructured»
): Element
Name | Type |
---|---|
«destructured» |
YesNoCellProps |
Element
Cells/YesNoCell.tsx:8
▸ configureTableCells(mapping
): void
Name | Type |
---|---|
mapping |
TableCellLookup |
void
configureTableCells.tsx:29
▸ defaultGetRowId<TRow
>(row
, index
): string
Name |
---|
TRow |
Name | Type |
---|---|
row |
TRow |
index |
number |
string
TableProvider.tsx:298
▸ useTableContext<TSource
, TRow
, TParams
, TData
>(): TableContextType
<TSource
, TRow
, TParams
, TData
>
Gets the type cast useTableContext
Note: you can pass incorrect types here and internally it is just a cast - so be careful of usage
Name | Type |
---|---|
TSource |
extends DataSource <TRow , TParams , TData > |
TRow |
GetRowType <TSource > |
TParams |
GetParamType <TSource > |
TData |
GetServiceResultType <TSource > |
TableContextType
<TSource
, TRow
, TParams
, TData
>
TableProvider.tsx:270