Function useTable

examples/vanilla/sorting/src/useTable.ts:17–57

(
  options: TableOptions<TData>,
)

}

export const useTable = <TData extends RowData>(
  options: TableOptions<TData>,
) => {
  // Compose in the generic options to the user options
  const resolvedOptions: TableOptionsResolved<TData> = {
    state: {}, // Dummy state
    onStateChange: () => {}, // noop
    renderFallbackValue: null,
    ...options,
  }

  // Create a new table
  const table = createTable<TData>(resolvedOptions)

  // By default, manage table state here using the table's initial state
  const state = atom(table.initialState)

  // Subscribe to state changes
  state.subscribe((currentState) => {
    table.setOptions((prev) => ({
      ...prev,
      ...options,
      state: {
        ...currentState,
        ...options.state,
      },
      // Similarly, we'll maintain both our internal state and any user-provided state
      onStateChange: (updater) => {
        if (typeof updater === 'function') {
          const newState = updater(currentState)
          state.set(newState)
        } else {
          state.set(updater)
        }
        options.onStateChange?.(updater)
      },
    }))
  })

  return table
}